<!doctype html>
<html ng-app="docsIsolateScopeDirective">
<head>
<script src="http://code.angularjs.org/1.2.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<my-customer info="naomi"></my-customer>
<hr>
<my-customer info="igor"></my-customer>
</div>
</body>
</html>
Bắt đầu tag của directive chúng ta cần khai báo các biến mà ta muốn truyền từ parent scope xuống child scope, info = "naomi" tức là ta muốn biến naomi của parent scope được truyền xuống children scope theo ba cách.
Cách 1:
{
scope:{
hear:"@info"
}
}
Ta muốn biến naomi mà thuộc tính info tham chiêu tới sẽ được truyền từ biến naomi của scope parent xuống scope child thông qua biến hear, như vậy trong template của directive ta chỉ cần ghi {{hear}} thì biến hear trong children scope sẽ cập nhật giá trị của biến naomi của scope parent
Cách 2:
{
scope:{
hear:"=info"
}
}
Cách này cũng giống như trên nhưng chúng ta muốn biến hear và naomi phải cùng tham chiếu tới nhau(2 two way binding) tức là cái này thay đổi thì cái kia cũng thay đổi.
Cách 3:
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
.directive('myComponent', function () {
return {
scope:{
isolatedExpressionFoo:'&'
}
};
}).controller('MyCtrl', ['$scope', function ($scope) {
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
Cách này được áp dụng khi chúng ta muốn từ child scope ,chúng ta có thể sử dụng một biểu thức hoặc một hàm của scope parent.
Như trên chúng ta cần khai báo :
isolated-expression-foo="updateFoo(newFoo)",
isolated-expression-foo là một định danh để chúng ta khai báo rằng biến isolatedFoo sẽ được truyền tới newFoo nằm trong hàm updateFoo(newFoo) như khai báo ban đầu,để từ đây chúng ta có thể thực thi hàm updateFoo từ scope parent trong controller ,qua đó cập nhật tất cả các biến foo trong parent scope.
isolated-expression-foo="updateFoo(newFoo)",
isolated-expression-foo là một định danh để chúng ta khai báo rằng biến isolatedFoo sẽ được truyền tới newFoo nằm trong hàm updateFoo(newFoo) như khai báo ban đầu,để từ đây chúng ta có thể thực thi hàm updateFoo từ scope parent trong controller ,qua đó cập nhật tất cả các biến foo trong parent scope.
Không có nhận xét nào:
Đăng nhận xét