☰

AngularJS - ディレクティブに関数を渡す 質問する

tag-icon • tag-icon angularjs
AngularJS - ディレクティブに関数を渡す 質問する

私は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>

ボタンをクリックすると警告ボックスが表示されるようにしたいのですが、何も表示されません。

誰か助けてくれませんか？

ベストアンサー1

分離スコープ ディレクティブ内から親スコープ内のコントローラー関数を呼び出すには、dash-separatedOP が言ったように 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

おすすめ記事