角度指令调用父控制器功能

如何让我的指令调用父母的控制器功能？我有一个指令，它看起来像这样：角度指令调用父控制器功能

HTML：

<div ng-app="myapp" ng-controller="mainController as mainCtrl"> 
some body text<br> 
    <a href="javascript:;" ng-click="mainCtrl.myfunc()">Click Me from body</a> 
    <photo photo-src="abc.jpg" caption="This is so Cool" /> 
</div>

的Javascript：

var app = angular.module('myapp',[]); 

app.controller('mainController', function(){ 
    var vm = this; 
    vm.myfunc = myfunc; 

    function myfunc(){ 
     console.log("Log from myfunc"); 
    } 
}); 

app.directive('photo',function(){ 
    return { 
     restrict: 'E', 
     template: '<figure> <img ng-src="{{photoSrc}}" width="500px"> <figcaption>{{caption}}</figcaption> <a href="javascript:;" ng-click="mainCtrl.myfunc()">Click Me</a></figure>', 
     replace: true, 
     scope: { 
      caption: '@', 
      photoSrc: '@' 
     } 
    } 
});

http://jsfiddle.net/7q9v3zz2/

当我点击Click Me from body链接，它显示控制台日志消息预期。但是，当我点击Click Me from directive时，什么也没有发生。我怎样才能使它工作？

来源

2015-07-11 user1995781

使用'＆'将函数传递到'scope'，就像用'@'传递其他参数一样。 – Claies

检查此videotutorial关于隔离示波器。它包含您需要的实际示例，它可能对您有用https://egghead.io/lessons/angularjs-understanding-isolate-scope – Mindastic

您正在使用独立作用域，因此您无法直接访问父作用域，因为它们没有被继承到隔离作用域。你可以使用$parent（通过做ng-click="$parent.mainCtrl.myfunc()"）。然而，这会变得很难看，并且会与其父母紧密耦合，相反，您可以使用函数绑定（&）。

return { 
     restrict: 'E', 
     template: '<figure> <img ng-src="{{photoSrc}}" width="500px"> <figcaption>{{caption}}</figcaption>  
     <a href="javascript:;" ng-click="onClick()">Click Me from directive</a></figure>', 
     replace: true, 
     scope: { 
      caption: '@', 
      photoSrc: '@', 
      onClick: '&' //<-- Accept function binding and use it in the template 
     } 
    }

并将其注册到消费者级别，以便它变得更加可重用。

<photo photo-src="abc.jpg" caption="This is so Cool" on-click="mainCtrl.myfunc()" />

Fiddle

您还可以使用儿童创作的范围，而不是孤立的范围，并直接调用父控制器方法。这里是一个demo

来源

2015-07-11 02:20:03 PSL

角度指令调用父控制器功能

回答

相关问题