AngularJS

Question

有没有办法在使用指令包装数据时不丢失与当前控制器的连接？

我的问题是，包装模板中的指令不再与外部控制器建立连接，因此我无法执行函数。

包装指令：

myApp.directive('wrapContent', function() {
    return {
        restrict: "E",
        scope: {
            model:                      "=",
            datas:                      "="
        },
        templateUrl: "./any/template.php",
        link: function(scope, element, attr) {
            // any
        }
    };
});

包装模板中的指令

myApp.directive('doAction', function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            $(elem).click(function(e) {
                scope.$apply(attrs.doAction);
            });
        }
    }
});

控制器：

lmsApp.controller('OutsideController', function ($scope){
    $sope.sayHello = function() {
        alert("hello");
     };
});

HTML 我想执行函数的地方 (template.php):

<div>
     <do-action="sayHello()"></do-action>
</div>

我如何调用外部的 wrapContent 指令（已更新）：

<div ng-controller="OutsideController">
        <wrap-content model="any" datas="data_any"></wrap-content>
</div>

如何执行 sayHello() 函数？

感谢您的帮助！我将不胜感激每一个答案。

Answer 1

您应该使用 &

将 sayHallo 函数传递给您的父指令

myApp.directive('wrapContent', function() {
    return {
        restrict: "E",
        scope: {
            model:                      "=",
            datas:                      "=",
            sayHallo: "&"
        },
        templateUrl: "./any/template.php",
        link: function(scope, element, attr) {
            // any
        }
    };
});

HTML

<div ng-controller="OutsideController">
        <wrap-content model="any" datas="data_any" sayHallo="sayHallo()"></wrap-content>
</div>

然后在你的子指令中，你将在你的范围内有 sayHallo，调用它只是这样做：

myApp.directive('doAction', function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
             scope.sayHallo();
        }
    }
});

而且你不需要再次通过它。所以你的子指令应该是这样的：

<div>
     <do-action></do-action>
</div>

更新

如果您想使用所有父模型函数，而不传递每个函数。在您的子指令中，只需使用 scope.model 即可访问模型属性和函数。

myApp.directive('doAction', function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
             scope.model.sayHallo();
        }
    }
});

Answer 2

wrapContent 指令将在控制器范围内处理。 DoAction 指令将与 wrapContent 指令的 isolateScope 一起处理。

解决方案1：使用“&”获取对 wrapContent 中 sayHello 函数的引用，并在事件处理程序中执行它。

方案二：不要在事件处理程序中使用范围，而是使用 scope.$parent.

AngularJS - 指令换行而不丢失与控制器的连接

AngularJS - Directive wrapping without losing connection to controller

javascript

controller

directive

angularjs-directive