码迷,mamicode.com
首页 > Web开发 > 详细

angularJS指令系统---Directive

时间:2017-07-22 09:39:42      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:code   前缀   src   put   var   范围   button   boot   javascrip   

指令:Directive  

angularJS 有一套完整的,可拓展的,用来帮助web应用开发的指令集;

在建立DOM期间,和HTML关联着的指令会被检测到,并被执行;

在angularJS中将前缀为 ng- 这种属性称之为指令,其作用就是为DOM元素调用方法,定义行为绑定数据等;

简单说:当一个angular 应用启动时,angular会遍历DOM树来解析HTML,根据指令不同,完成不同的操作;

指令属性小提示:

ng-xxx 的属性并不是标准中定义的属性,很多情况下语法校验是无法通过的;

HTML5允许拓展(自制的)的属性,以data- 开头;

在angularJS中可以使用 data-ng- 来让网页对HTML有效(两者效果都是一样的)

<hrml ng-app>
<hrml data-ng-app>

 

ng-app指令

ng-app 指令用来表明一个 angularJS 应用程序;

标记在一个 angularJS 的作用范围在根对象上;

系统执行的时候会自动的执行根对象范围内的指令;

可以在一个页面创建多个 ng-app 节点(不推荐),原因:创建多个 ng-app 时,默认只能执行第一个,后面的需要进行手动引导:angular.bootstrap()

标记的范围尽可能小,性能优化

 

多个 ng-app 的使用: 

<div ng-app="myAppOne" ng-controller="myAppOneController">
<input type="button" value="按钮一" ng-click="show()">
</div>
<div ng-app="myAppTwo" ng-controller="myAppTwoController">
<input type="button" value="按钮二" ng-click="show()">
</div>
</body>
<script type=‘text/javascript‘ src=‘bower_components/angular/angular.js‘></script>
<script type="text/javascript">
var myAppOne = angular.module(myAppOne,[]);
myAppOne.controller(myAppOneController,[$scope,function($scope){
    $scope.show = function(){console.log(1);};
}]);
var myAppTwo = angular.module(myAppTwo,[]);
myAppTwo.controller(myAppTwoController,[$scope,function($scope){
    $scope.show = function(){console.log(2);};
}]);
//手动引导让第二个div被myAppTwo管理
angular.bootstrap(document.querySelector([ng-app="myAppTwo"]),[myAppTwo]);
//上面这种方法,可以解决,但是angularJS不推荐,推荐使用的是:
//创建一个新模块,去管理其他的模块 接下来将ng-app="myApp"
angular.module(myApp,[myAppOne],[myAppTwo]);
</script>

 

angularJS指令系统---Directive

标签:code   前缀   src   put   var   范围   button   boot   javascrip   

原文地址:http://www.cnblogs.com/e0yu/p/7220108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!