0

「Celebrity Name」の 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 種類の分離スコープを使用する方法を誰か教えてください。

4

1 に答える 1

2

3 つの記号は、用途が異なります。

  • @(続きを読む) : 現在のスコープから分離されたスコープに文字列を渡すことができます。

html :

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

js:

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 !'
    }
  };
});
  • =(続きを読む) : 分離されたスコープから使用および変更できるオブジェクトを渡すことができます。問題は、このオブジェクトを変更する場合は、オブジェクト自体を直接変更しないでください。そうしないと、現在のスコープと分離されたスコープの間の双方向のバインディングが壊れて、2 つの異なるコピーが作成されます (1 つは現在のスコープにあり、もう 1 つは現在のスコープにあります)。隔離された状態で)。したがって、必要な場合を除き、プロパティを変更してバインディングを保持するだけです。

html :

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

js:

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 !'
    }
  };
});
  • &(続きを読む) を使用すると、現在のスコープの関数式を分離スコープから呼び出すことができます。

html :

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

js:

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-13T08:41:36.313 に答える