指令函数 怎么传参数 angularjs?

指令函数 怎么传参数 angularjs



MMTTMM
浏览 794回答 1
1回答

犯罪嫌疑人X

指令,很重要AngularJS与JQuery最大的区别在哪里?我认为,表现在数据双向绑定,实质就是DOM的操作形式不一样。JQuery通过选择器找到DOM元素,再赋予元素的行为;而AngularJS则是,将指令与DOM绑定在一起,再扩展指令的行为。所以AngularJS开发最理想的结果就是,在页面HTML与CSS的设计时,设计工程师只需要关注指令的使用;而在背后的逻辑开发上,架构工程师则是不需要知道如何操作DOM,只需要关注指令背后的行为要如何实现就行;测试工程师也可以开发针对指令的单元测试。指令就是DOM与逻辑行为的媒介,本质就是DOM绑定的独立逻辑行为函数。指令难点在于参数来看看都有哪些angular.module('app', []).directive('myDirective', function() {return {restrict: String,priority: Number,terminal: Boolean,template: String or Template Function:function(tElement, tAttrs) {...},templateUrl: String,replace: Boolean or String,scope: Boolean or Object,transclude: Boolean,controller: String orfunction(scope, element, attrs, transclude, otherInjectables) { ... },controllerAs: String,require: String,link: function(scope, iElement, iAttrs) { ... },compile: // 返回一个对象或连接函数,如下所示:function(tElement, tAttrs, transclude) {return {pre: function(scope, iElement, iAttrs, controller) { ... },post: function(scope, iElement, iAttrs, controller) { ... }}return function postLink(...) { ... }}};});刚开始接触指令的时候,我简直就是蒙了,这堆参数究竟怎么用怎么理解啊。告诉大家我的一个理解方法。把它们分成三类:描述指令或DOM本身特性的内部参数连接指令外界、与其他指令或控制器沟通的对外参数描述指令本身行为的行为参数内部参数restrict:String,E(元素)<my-directive></my-directive> A(属性,默认值)<divmy-directive="expression"></div> C(类名)<div class="my-directive:expression;"></div> M(注释)<--directive:my-directiveexpression-->priority: Number,指令执行优先级template: String,指令链接DOM模板,例如“<h1>{{head}}</h1>”templateUrl:String,DOM模板路径replace: Boolean,指令链接模板是否替换原有元素,对外参数——scopescope参数非常重要,本应该是放到最后说明的,但是scope却是理解其他参数的关键,所以务必先跟大家说清楚。scope参数的作用是,隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。scope参数是可选的,默认值为false,可选true、对象{};false:共享父域true:继承父域,且新建独立作用域对象{}:不继承父域,且新建独立作用域false、true、{}三者对比来看个例子<body><div ng-controller='parentCtrl'><h3>指令scope参数——false、true、{}对比测试</h3>parent:<div><span> {{parentName}}</span><input type="text" ng-model="parentName" /></div><br /><child-a></child-a><br /><child-b></child-b><br /><child-c parent-name="parentName"></child-c></div><!--t1指令模板--><script type="text/html" id="t1"><div><span>{{parentName}}</span><input type="text" ng-model="parentName" /></div></script><script>var app = angular.module("app", []);app.controller('parentCtrl', function ($scope) {$scope.parentName = "parent";})//false:共享作用域app.directive('childA', function () {return {restrict: 'E',scope: false,template: function (elem, attr) {return "false:" + document.getElementById('t1').innerHTML;}};});//true:继承父域,并建立独立作用域app.directive('childB', function () {return {restrict: 'E',scope: true,template: function (elem, attr) {return "true:" + document.getElementById('t1').innerHTML;},controller: function ($scope) {$scope.parentName = "parent";//已声明的情况下,$scope.$watch监听的是自己的parentName$scope.$watch('parentName', function (n, o) {console.log("child watch" + n);});//$scope.$parent.$watch监听的是父域的parentName$scope.$parent.$watch('parentName', function (n, o) {console.log("parent watch" + n);});}};});//{}:不继承父域,建立独立作用域app.directive('childC', function () {return {restrict: 'E',scope: {},template: function (elem, attr) {return "{}:" + document.getElementById('t1').innerHTML;},controller: function ($scope) {console.log($scope);}};});</script></body>false参数本质:子域与父域共享作用域。特点:父域修改parentName的同时,指令绑定的parentName的元素会被刷新。blog.csdn.net/kongjiea/article/details/49840035&nbsp;
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

AngularJS