AngularJS – 传递函数到指令

发布时间：2020-12-17 09:18:53 所属栏目：安全来源：网络整理

导读：我有一个例子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('12

我有一个例子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>

我想当我点击按钮，警报框会出现，但没有显示。

谁能帮助我？

要从一个隔离范围指令内部调用父范围中的控制器函数，在HTML中使用dash-separated属性名称，就像OP所说的。

另外，如果你想发送一个参数到你的函数，通过传递一个对象来调用该函数：

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

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

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

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

Fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!