从指令视图 AngularJS 调用控制器中的函数

calling function in a controller from a directive view, angularJS

本文关键字：函数 控制器 调用 指令 视图 AngularJS      更新时间：2023-09-26

我正在尝试使用 ng-click 在 html 中调用两个函数作为指令。 第一个函数"checkUrl"位于指令控制器中，并且工作正常。

第二个函数"findUrl"位于主应用程序控制器中，并且未被触发。

.HTML：

<div class="status" ng-click="checkUrl()">
    <b ng-click="checkUrl()">{{card.status}}</b>
</div>
<div ng-click="findUrl()" class="image">
    <img ng-src={{card.image}} alt="">
</div>

我有几个问题：

1） 这是因为两个控制器的作用域不同，其中一个无法访问另一个控制器吗？

2） 如何让指令 view/html 调用主控制器函数？

指令的控制器：

$scope.checkUrl = function() {
    console.log("invoking checkUrl from the directive's controller.")
    asnService.showUrl();
};

应用控制器：

$scope.findUrl = function() {
    console.log("invoking findUrl from the app controller");
    asnService.showUrl();
};

要回答您的问题，您可以使用 $scope.$parent.findUrl（） 访问指令父作用域上的范围变量。不一定推荐，但它有效。

这里有

3种方法：

第一

如果在指令中没有隔离范围，您的示例工作正常https://jsfiddle.net/vorant/waf8rta2/1/

第二

如果指令中的范围是隔离的，请将此代码添加到指令的控制器中 

    $scope.findUrl = function() {
        $scope.$parent.findUrl();
    };

https://jsfiddle.net/vorant/waf8rta2/2/

最佳使用方式$emit（指令必须具有隔离范围）

指令的控制器：

    $scope.findUrl = function() {
        $scope.$emit('status:findUrl');
    };

应用控制器：

    $scope.$on('status:findUrl',function(){
        $scope.findUrl();
    });

https://jsfiddle.net/vorant/waf8rta2/4/

相关文章：