基本角度指示文で隔離されたスコープを定義するときに '＆'接頭辞を使用できません

角度指定に悩まされ、分離スコープに問題があります。私は非常に基本的なディレクティブ/コントローラを作成しており、スコープ属性を '&'プレフィックスに設定することで、ディレクティブ内からng-clickを警告するだけです。私は今45分間これを見つめていて、何が間違っているのか分かりませんが、ボタンをクリックしても何も起こっていません（他の2つのプレフィックスは動作しています）。ここでディレクティブ/コントローラのためのコードは次のとおりです。基本角度指示文で隔離されたスコープを定義するときに '＆'接頭辞を使用できません

angular.module('mePracticing', []);

：

<html> 
<head> 
    <title>Directive Practice</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 
<body ng-app="mePracticing"> 
    <h1>HEADER</h1> 

    <div ng-controller="practiceController"> 
     <practice-directive movie="movie" display="display(movie)" rating="{{rating}}"></practice-directive> 
    </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="app.js"></script> 
    <script src="myDirective.js"></script> 
</body> 
</html>

app.js私は私のモジュールを作成するだけで1行です：

(function() { 
    'use strict'; 
    angular 
     .module('mePracticing') 
     .directive('practiceDirective', practiceDirective); 

    function practiceDirective() { 
     var directive = { 
      restrict: 'AE', 
      scope: { 
       movie: '=', 
       rating: '@', 
       display: '&' 
      }, 
      template: '<div>Movie: {{movie}}</div>' + 
       "Enter a movie: <input type ='text' ng-model='movie'>" + 
       "<div>Rating: {{rating}}</div>" + 
       "<div><button ng-click='displayMovie(movie)'>CLICK ME</button></div>" 
     }; 
     return directive; 
    } 
})(); 


(function() { 
    'use strict'; 
    angular 
     .module('mePracticing') 
     .controller('practiceController', practiceController); 

    function practiceController($scope) { 
     $scope.movie = 'The Big Lebowski'; 
     $scope.rating = 1000101010; 
     $scope.displayMovie = function(movie) { 
      alert("Movie :" + movie); 
     } 
    } 
})();

そして、ここではHTMLがあります

誰でも私に「&」が動作しない理由についてのヒントを教えていただけたら、本当に感謝しています。ありがとうございました！

編集：私はそれのためJSFiddleを作った：https://jsfiddle.net/hozxz5n4/

出典

2017-08-21 amacdonald

ディレクティブはので、あなたのdisplayMovie()機能が得るのが呼ばれることはありませんpracticeControllerで導入され、独自の分離された範囲を持っています。そのようなあなたのディレクティブに機能を移動：

function practiceDirective() { 
    var directive = { 
     restrict: 'AE', 
     scope: { 
     movie: '=', 
     rating: '@', 
     display: '&' 
     }, 
     link: function(scope, element, attrs) { 
      scope.displayMovie = function(movie) { 
       alert("Movie :" + movie); 
     } 
     }, 
     template: '<div>Movie: {{movie}}</div>' + 
     "Enter a movie: <input type ='text' ng-model='movie'>" + 
     "<div>Rating: {{rating}}</div>" + 
     "<div><button ng-click='displayMovie(movie)'>CLICK ME</button></div>" 
    }; 
    return directive; 
}

の作業フィドル： https://jsfiddle.net/hozxz5n4/1/

はまたthis great answerを見てみましょう。

出典

2017-08-21 23:56:06

あなたが「表示」と呼ばれる機能がないディレクティブを使用しているとき、あなたが宣言された関数合格する必要があるため、これが発生した：ディレクティブで

<practice-directive movie="movie" display="displayMovie(movie)" rating="{{rating}}"></practice-directive>

、最終的にはちょうどディスプレイ小道具関数を呼び出します。

(function() { 
    'use strict'; 
    angular 
    .module('mePracticing') 
    .directive('practiceDirective', practiceDirective); 

    function practiceDirective() { 
    var directive = { 
     restrict: 'AE', 
     scope: { 
     movie: '=', 
     rating: '@', 
     display: '&' 
     }, 
     template: '<div>Movie: {{movie}}</div>' + 
     "Enter a movie: <input type ='text' ng-model='movie'>" + 
     "<div>Rating: {{rating}}</div>" + 
     "<div><button ng-click='display()'>CLICK ME</button></div>" 
    }; 
    return directive; 
    } 
})();

出典

2017-08-22 00:07:15 SergioEscudero

ああ、私はそれを得ると思います。 display = displayMovie（movie）属性を宣言すると、その関数はコントローラからmyディレクティブにdisplayという関数として渡され、ディレクティブの中でdisplayを呼び出すだけです。いずれにしても、これはうまくいってありがとう！ – amacdonald

はい、あなたはそれを持っています！ – SergioEscudero

ありがとうございます。私は本当に助けに感謝します。 – amacdonald

基本角度指示文で隔離されたスコープを定義するときに '＆'接頭辞を使用できません

答えて

関連する問題