如何从具有隔离范围的指令公开行为? [英] How to expose behavior from a directive with isolated scope?

问题描述

如何从指令公开方法?我知道我应该为数据使用属性，但我真的想公开行为，而不是数据.父控制器可以调用的东西.

假设我的 DOM 如下所示:

<div ng-controller="MyCtrl"><button ng-click="call()" >Call</button><div id="container" my-directive>

JavaScript:

angular.module("main", []).controller("MyCtrl", function($scope) {$scope.call = function() {$scope.myfn();};}).directive("myDirective", function() {返回 {//范围: {}，控制器:功能($范围){$scope.myfn = 函数(){console.log("myfn 调用");}}};});

jsFiddle:http://jsfiddle.net/5gDjQ/7/

如果 scope 被注释掉(即指令没有独立的作用域)，它工作得很好.当我按下按钮时，myfn 被调用并登录到控制台.

一旦我取消注释 scope，它就不起作用.myfn 是在子作用域上定义的，并且不容易被父级访问.

就我而言，我认为污染父作用域是一个坏主意，我真的很想避免它.

那么，如何向父控制器公开指令中的函数?或者:如何从父控制器调用指令的方法?

解决方案

您可以通过在作用域中设置一个双向绑定到控制器的变量(使用=")来使用隔离作用域执行此操作.在您的指令中，您可以将函数分配给该变量，Angular 将使用绑定在您的控制器中查找相应的变量.该变量将指向您的控制器可以调用的函数.

http://jsfiddle.net/GWCCr/

html:注意新的属性:

<div ng-controller="MyCtrl"><button ng-click="call()" >Call</button><div id="container" my-directive my-fn="fnInCtrl">

js:

angular.module("main", []).controller("MyCtrl", function($scope) {$scope.call = function() {$scope.fnInCtrl();};}).directive("myDirective", function() {返回 {范围: {我的Fn: '='},控制器:功能($范围){$scope.myFn = 函数(){console.log("myfn 调用");}}};});

How can I expose a method from a directive? I know that I should use attributes for data, but I really want to expose behavior, not data. Something that the parent controller can call.

Let's say my DOM looks like:

<div ng-app="main">
    <div ng-controller="MyCtrl">
        <button ng-click="call()" >Call</button>
        <div id="container" my-directive> </div>
    </div>
</div>

JavaScript:

angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.call = function() {
        $scope.myfn();
    };
}).directive("myDirective", function() {
    return {
        // scope: {},
        controller: function($scope) {
            $scope.myfn = function() {
                console.log("myfn called");
            }
        }
    };
});

jsFiddle: http://jsfiddle.net/5gDjQ/7/

If the scope is commented out (i.e. the directive does not have isolated scope), it works just fine. When I press the button, myfn is called and logs to console.

As soon as I uncomment scope, it doesn't work. myfn is defined on child scope and not easily available to the parent.

In my case I think that polluting the parent scope is a bad idea and I would really like to avoid it.

So, how can I expose a function from directive to the parent controller? Or: How can I invoke a method on directive from parent controller?

解决方案

You can do this with an isolated scope by setting up a variable in the scope that's two-way bound to the controller (using '='). In your directive you can then assign the function to that variable, and angular will use the binding to find the corresponding variable in your controller. That variable will point to a function that your controller can call.

http://jsfiddle.net/GWCCr/

html: Note the new attrib:

<div ng-app="main">
    <div ng-controller="MyCtrl">
        <button ng-click="call()" >Call</button>
        <div id="container" my-directive my-fn="fnInCtrl"> </div>
    </div>
</div>

js:

angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.call = function() {
        $scope.fnInCtrl();
    };
}).directive("myDirective", function() {
    return {
        scope: {
            myFn: '='
        },
        controller: function($scope) {
            $scope.myFn = function() {
                console.log("myfn called");
            }
        }
    };
});

这篇关于如何从具有隔离范围的指令公开行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！