学习AngularJs:Directive指令用法(完整版)
(2)一个函数,可接受两个参数tElement和tAttrs 下面让我们看看template是一个函数时候的情况 lt;!DOCTYPE htmlgt; lt;html lang="zh" ng-app="myApp"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;titlegt;AngularJS入门学习lt;/titlegt; lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;hello-worldgt;lt;/hello-worldgt; lt;hello-world2 title = '我是第二个directive'gt;lt;/hello-world2gt; lt;/bodygt; lt;script type="text/javascript"gt; var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', template: 'lt;divgt;lt;h1gt;Hi 我是林炳文~~~lt;/h1gt;lt;/divgt;', replace: true }; }); app.directive("helloWorld2",function(){ return{ restrict:'EAC', template: function(tElement,tAttrs){ var _html = ''; _html += 'lt;divgt;' +'hello '+tAttrs.title+'lt;/divgt;'; return _html; } }; }); lt;/scriptgt; lt;/htmlgt; 结果:
可以看到指令中还用到了hello-world2中的标签中的 title字段 5.templateUrl(字符串或者函数),可选参数,可以是 (2)一个函数,可接受两个参数tElement和tAttrs(大致同上) 注意:在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错 Cross Origin Request Script(CORS)错误。由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板 lt;script type='text/ng-template' id='hello.html'gt; lt;divgt;lt;h1gt;Hi 我是林炳文~~~lt;/h1gt;lt;/divgt; lt;/scriptgt; 这里的id属性就是被设置在templateUrl上用的。 lt;!DOCTYPE htmlgt; lt;html lang="zh" ng-app="myApp"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;titlegt;AngularJS入门学习lt;/titlegt; lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;hello-worldgt;lt;/hello-worldgt; lt;/bodygt; lt;script type="text/javascript"gt; var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', templateUrl: 'hello.html', replace: true }; }); lt;/scriptgt; lt;script type='text/ng-template' id='hello.html'gt; lt;divgt;lt;h1gt;Hi 我是林炳文~~~lt;/h1gt;lt;/divgt; lt;/scriptgt; lt;/htmlgt; 输出结果:
另一种办法缓存是: app.run(["$templateCache", function($templateCache) { $templateCache.put("hello.html", "lt;divgt;lt;h1gt;Hi 我是林炳文~~~lt;/h1gt;lt;/divgt;"); }]); 使用实例如下: lt;!DOCTYPE htmlgt; lt;html lang="zh" ng-app="myApp"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;titlegt;AngularJS入门学习lt;/titlegt; lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;hello-worldgt;lt;/hello-worldgt; lt;/bodygt; lt;script type="text/javascript"gt; var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', templateUrl: 'hello.html', replace: true }; }); app.run(["$templateCache", function($templateCache) { $templateCache.put("hello.html", "lt;divgt;lt;h1gt;Hi 我是林炳文~~~lt;/h1gt;lt;/divgt;"); }]); lt;/scriptgt; lt;/htmlgt; 结果:
nbsp;其实第一种方法还好一些,写起来会比较快,笔者就得最多的也是第一种写法,直接包在scprit当中 nbsp;6.replace nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; nbsp;replace为true时,hello-world这个标签不在了,反之,则存在。 7.scope (2)true。表示继承父作用域,并创建自己的作用域(子作用域); (3){}。表示创建一个全新的隔离作用域; 7.1首先我们先来了解下scope的继承机制。我们用ng-controller这个指令举例, lt;!DOCTYPE htmlgt; lt;html lang="zh" ng-app="myApp"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;titlegt;AngularJS入门学习lt;/titlegt; lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;div ng-controller='MainController'gt; 父亲:{{name}}lt;input ng-model="name" /gt; lt;div my-directivegt;lt;/divgt; lt;/divgt; lt;/bodygt; lt;script type="text/javascript"gt; var app = angular.module('myApp', []); app.controller('MainController', function ($scope) { $scope.name = '林炳文'; }); app.directive('myDirective', function () { return { restrict: 'EA', scope:false, template: 'lt;divgt;儿子:{{ name }}lt;input ng-model="name"/gt;lt;/divgt;' }; }); lt;/scriptgt; lt;/htmlgt; 接下来我们通过一个简单明了的例子来说明scope取值不同的差别: scope:false scope:true scope:{} 当为false时候,儿子继承父亲的值,改变父亲的值,儿子的值也随之变化,反之亦如此。(继承不隔离) 当为true时候,儿子继承父亲的值,改变父亲的值,儿子的值随之变化,但是改变儿子的值,父亲的值不变。(继承隔离) 当为{}时候,没有继承父亲的值,所以儿子的值为空,改变任何一方的值均不能影响另一方的值。(不继承隔离) (编辑:济南站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |