AngularJs
ng-click
ng-click
<div class="cnblogs_code">
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">ng-controller</span><span style="color: #0000ff;">="ngClickTest"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
测试ng-click指令
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">ng-click</span><span style="color: #0000ff;">="count=count+1"</span><span style="color: #0000ff;">></span>点击<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span><span style="color: #000000;">
{{count}}
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></
<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"><
<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #0000ff;">>
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">实例化应用对象,参数:模块名,空数组
<span style="background-color: #f5f5f5; color: #0000ff;">var<span style="background-color: #f5f5f5; color: #000000;"> app<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">angular.module(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">Home<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,[]);
app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">ngClickTest<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(){})
<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">ng-controller</span><span style="color: #0000ff;">="ngClickTest"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
测试ng-click指令
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">ng-click</span><span style="color: #0000ff;">="toggle()"</span><span style="color: #0000ff;">></span>点击<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">ng-hide</span><span style="color: #0000ff;">="flag"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
姓名:{{name}}
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></
<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"><
<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #0000ff;">>
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">实例化应用对象,参数:模块名,空数组
<span style="background-color: #f5f5f5; color: #0000ff;">var<span style="background-color: #f5f5f5; color: #000000;"> app<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">angular.module(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">Home<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,[]);
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">调用app对象的controller方法,参数:控制器名,匿名函数
<span style="background-color: #f5f5f5; color: #000000;"> app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">ngClickTest<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">($scope){
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">分配变量
<span style="background-color: #f5f5f5; color: #000000;"> $scope.name<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">陶士涵<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">;
$scope.flag<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #0000ff;">false<span style="background-color: #f5f5f5; color: #000000;">;
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">分配过去一个函数
<span style="background-color: #f5f5f5; color: #000000;"> $scope.toggle<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(){
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">函数起到的作用
<span style="background-color: #f5f5f5; color: #000000;"> $scope.flag<span style="background-color: #f5f5f5; color: #000000;">=!<span style="background-color: #f5f5f5; color: #000000;">$scope.flag;
}
})
<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>