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

Question

我正在尝试使用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();
};

Answer 1

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

Answer 2

这是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/