angularJS指令系统---Directive

Posted 帅到要去报警

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularJS指令系统---Directive相关的知识,希望对你有一定的参考价值。

指令: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/javascriptsrc=‘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的主要内容,如果未能解决你的问题,请参考以下文章

学习AngularJs:Directive指令用法(完整版)

AngularJS:directive自定义的指令

angularjs 指令(directive)详解

AngularJS clone directive 指令复制

AngularJs 指令directive之require

angularjs Directive自定义指令详解