2016-03-22 8 views
0

属性によってディレクティブに関数を渡しています。ディレクティブのスコープ内で機能しません。

という問題は、私がそれを呼び出す前に関数が起動したことです。より奇妙な問題は、ディレクティブのスコープを宣言した場合にのみ発生するということです。それははっきりしていない場合は

、私のコードは説明します:

を定義されたスコープ

angular.module('app', []). 
 
controller('ctrl', function($scope){ 
 
    $scope.testString = 'test string'; 
 
    $scope.testFunction = function(text) { 
 
    console.log(text); 
 
    } 
 
}).directive('test', function() { 
 
    return { 
 
    link: function(scope, element) {} 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <span test="testFunction(testString)">Test Directive</span> 
 
</div>

なしで定義された範囲で

angular.module('app', []). 
 
controller('ctrl', function($scope){ 
 
    $scope.testString = 'test string'; 
 
    $scope.testFunction = function(text) { 
 
    console.log(text); 
 
    } 
 
}).directive('test', function() { 
 
    return { 
 
    scope: { 
 
     test: '=' 
 
    }, 
 
    link: function(scope, element) {} 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <span test="testFunction(testString)">Test Directive</span> 
 
</div>

http://jsbin.com/hunewu/edit?html,js

関数が3回を解雇した理由を定義したディレクティブの適用範囲の場合には、もう一つのポイント

答えて

2

=(双方向バインディング)を使用して、式バインディング(関数リファレンス)をディレクティブに渡すべきではありません。理想的には、このような場合には&(式バインディング)を使用する必要があります。

指令

​​

CodePen

関連する問題