Angularjs - directive
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Angularjs - directive，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3810字，纯文字阅读大概需要6分钟。
内容图文
1. What are Directives
Directives are one of the most powerful features of AngularJS. You can imagine them as building blocks ( aka re-usable components ) of any AngularJS application. Mastering all the directives, is totally out of this article’s scope. For that, I would really recommend this book; it covers everything you need to know about directives. Here, we’ll discuss one aspect of directives called : “Directive scope”.
var app = angular.module("test",[]);
app.directive("myDirective",function(){
return {
restrict: "EA",
scope: true,
link: function(scope,elem,attr){
// code goes here ... }
}
});
2. Scopes in AngularJS
a. Scope : False ( Directive uses its parent scope )
var app = angular.module("test",[]);
app.controller("Ctrl1",function($scope){
$scope.name = "Harry";
$scope.reverseName = function(){
$scope.name = $scope.name.split(‘‘).reverse().join(‘‘);
};
});
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: false,
template: "<div>Your name is : {{name}}</div>"+
"Change your name : <input type=‘text‘ ng-model=‘name‘ />"
};
});
b. Scope : True ( Directive gets a new scope )
var app = angular.module("test",[]);
app.controller("Ctrl1",function($scope){
$scope.name = "Harry";
$scope.reverseName = function(){
$scope.name = $scope.name.split(‘‘).reverse().join(‘‘);
};
});
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: true,
template: "<div>Your name is : {{name}}</div>"+
"Change your name : <input type=‘text‘ ng-model=‘name‘ />"
};
});
The "name" inside template, when update it, it won‘t affect the name in controller.
c. Scope : { } ( Directive gets a new isolated scope )
Then "name" inside Directive have nothing with the "name" inside controller
3. Can we pass some values from the parent scope to the directives now?
Yes ! Not only that, we might need to handle situations like invoking callbacks in parent scope, two-way binding between parent & directives scope ..etc
<
div
ng-app
="app"
>
<
div
class
="parent"
ng-controller
="MainCtrl"
>
<
div
class
="line"
>
Name inside parent scope is:
<
strong
>{{name}}</strong><input type="button" ng-click="reverseName()" value="Reverse name"/></div><div class="line">
Color inside parent scope is: <strong style="color:{{color}}">{{color|uppercase}}</strong><input type="button" ng-click="randomColor()" value="Randomize color"/></div><div class="directive" my-directive
name="{{name}}"
color="color"
reverse="reverseName()"></div></div></div>
var app = angular.module("app", []);
app.controller("MainCtrl", function( $scope ){
$scope.name = "Harry";
$scope.color = "#333333";
$scope.reverseName = function(){
$scope.name = $scope.name.split("").reverse().join("");
};
$scope.randomColor = function(){
$scope.color = ‘#‘+Math.floor(Math.random()*16777215).toString(16);
};
});
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: {
name: "@",
color: "=",
reverse: "&"
},
template: [
"<div class=‘line‘>",
"Name : <strong>{{name}}</strong>; Change name:<input type=‘text‘ ng-model=‘name‘ /><br/>",
"</div><div class=‘line‘>",
"Color : <strong style=‘color:{{color}}‘>{{color|uppercase}}</strong>; Change color:<input type=‘text‘ ng-model=‘color‘ /><br/></div>",
"<br/><input type=‘button‘ ng-click=‘reverse()‘ value=‘Reverse Name‘/>"
].join("")
};
});
There’re 3 types of prefixes AngularJS provides.
1. "@" ( Text binding / one-way binding )
2. "=" ( Direct model binding / two-way binding )
3. "&" ( Behaviour binding / Method binding )
原文：http://www.cnblogs.com/yk00/p/5142937.html
内容总结
以上是互联网集市为您收集整理的Angularjs - directive全部内容，希望文章能够帮你解决Angularjs - directive所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。