angularJS指令系统---Directive

Posted 2020-09-29 帅到要去报警

指令：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>