164

angularJSの例があります

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

ボタンをクリックするとアラートボックスが表示されますが、何も表示されません。

誰でも私を助けることができますか？

4

7 に答える 7

249

分離スコープ ディレクティブ内から親スコープでコントローラー関数を呼び出すにはdash-separated、OP のように HTML で属性名を使用します。

また、関数にパラメーターを送信する場合は、オブジェクトを渡して関数を呼び出します。

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Fiddle

于 2013-08-22T11:01:09.030 に答える
164

おそらく私は何かが欠けていますが、他のソリューションは親スコープ関数を呼び出しますが、ディレクティブ コードから引数を渡す機能はありません。これはupdate-fn、updateFn()たとえば{msg: "Hello World"}. わずかな変更により、ディレクティブは引数を渡すことができます。これは、はるかに便利だと思います。

<test color1="color1" update-fn="updateFn"></test>

HTML が関数参照を渡していることに注意してください。つまり、()括弧なしです。

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

したがって、上記では、HTML はローカル スコープcallUpdate関数を呼び出しており、親スコープから updateFn を「フェッチ」し、ディレクティブが生成できるパラメーターを使用して返された関数を呼び出します。

http://jsfiddle.net/mygknek2/

于 2015-03-13T01:33:02.560 に答える