Question

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

第二个函数'findUrl'位于主app控制器中，并未被触发。

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/

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

2 个答案: