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

如何讓我的指令調用父母的控制器功能？我有一個指令，它看起來像這樣：角度指令調用父控制器功能

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

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

回答

相關問題