Использование области изоляции - @, & и = в простой Угловой Директиве

Я сделал простой пример с директивами Angular.js для «Знаменитости». Я читаю об изолированных областях @, &, =, но я не знаю, как их использовать на следующем простом примере, чтобы понять их использование и различия. Кто-нибудь может мне помочь?Использование области изоляции - @, & и = в простой Угловой Директиве

HTML:

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <celebrity></celebrity> 
    <celebrity></celebrity> 
    <celebrity></celebrity> 
    <script> 
     //defining module 
     var app = angular.module('myApp',[]); 

     //defning Controller 
     app.controller('myCtrl',function($scope){ 
      $scope.name = "Brad Pitt"; 
     }); 

     //defining directive 
     app.directive('celebrity',function(){ 
      return{ 
       restrict: 'E', 
       scope: {}, 
       template: '<div>{{name}}</div>' 
      } 

     }); 
    </script> 
</body> 
</html>

Результат:

Currently all my 3 instances of directive 'celebrity' print 'Brad Pitt'.

Пожалуйста, кто-то сказать мне, как использовать 3 типа изолята объема в этом простом примере ,

источник

2016-02-13 Deadpool

В 3-х символов, имеют различное применение:

@ (read more): позволяет вам передавать строку из текущего объема к изолированным.

HTML:

<div ng-controller="myCtrl"> 
    <my-dir first-attr="Hello" second-attr="{{what}}"></my-dir> 
</div>

ЯШ:

angular 
.controller('myCtrl', function ($scope) { 
    $scope.what = 'World !' 
}) 
.directive('myDir', function() { 
    return { 
    scope : { 
     firstAttr : '@', 
     secondAttr : '@' 
    } 
    controller : function ($scope, $log) { 
     $log.log($scope.firstAttr + ' ' + $scope.secondAttr); // logs : 'Hello World !' 
    } 
    }; 
});

= (read more): позволяют передать объект, который вы можете использовать и изменять из выделенного объема. Дело в том, что если вы хотите изменить этот объект, никогда не меняйте непосредственно сам объект или он разрушит привязки между двумя путями между вашей текущей областью действия и изолированной и создаст две разные копии (одну в текущей области, и один в изолированном). Так что просто измените его свойства, чтобы сохранить привязки, если это не то, что вы хотите.

HTML:

<div ng-controller="myCtrl"> 
    <my-dir my-attr="helloWorld"></my-dir> 
</div>

ЯШ:

angular 
.controller('myCtrl', function ($scope) { 
    $scope.helloWorld = { 
    first : 'Hello', 
    second : 'World !' 
    }; 
}) 
.directive('myDir', function() { 
    return { 
    scope : { 
     myAttr : '=' 
    } 
    controller : function ($scope, $log) { 
     $scope.myAttr.second = 'Space !'; 

     $log.log($scope.myAttr.first + ' ' + $scope.myAttr.second); // logs : 'Hello Space !' 
    } 
    }; 
});

& (read more) позволяет вызывать функцию выражения текущего объема из выделенного объема.

HTML:

<div ng-controller="myCtrl"> 
    <my-dir my-attr="helloWorld"></my-dir> 
</div>

ЯШ:

angular 
.controller('myCtrl', function ($scope) { 
    $scope.helloWhat = function (what) { 
    $log.log('Hello ' + what + ' !'); 
    }; 
}) 
.directive('myDir', function() { 
    return { 
    scope : { 
     myAttr : '&' 
    } 
    controller : function ($scope, $log) { 
     $scope.myAttr('Angular');  // logs : 'Hello Angular !' 
    } 
    }; 
});

источник

2016-02-13 08:41:36 Freezystem

Использование области изоляции - @, & и = в простой Угловой Директиве

ответ

Смежные вопросы