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：使用'＆amp;'获取wrapContent中sayHello函数的引用并在事件处理程序中执行它。

溶液2：不要在事件处理程序中使用范围，而是使用范围。$ parent。

AngularJS - 指令包装而不会丢失与控制器的连接

2 个答案: