从 AngularJS 中的父控制器调用指令的方法 [英] Calling directive's methods from parent controller in AngularJS

问题描述

我将 AngularJS 与别名控制器模式一起使用.我无法从父控制器访问(或我不知道如何访问)指令方法.

我的控制器中有一个函数应该调用一个指令方法，但是这个指令方法在 this 控制器值中不可用.

这就是我所拥有的.我做错了什么?

JS

angular.module('myApp', []).控制器('MyCtrl'，函数(){this.text = '控制器文本';this.dirText = '指令文本';this.click = function(){this.changeText();}}).directive('myDir', function(){返回 {限制:'E'，范围: {文字:'='},链接:功能(范围，元素，属性){scope.changeText = function(){scope.text = '新指令文本';};},模板:'<h2>{{text}}</h2>'};});

HTML

<div ng-controller="MyCtrl as ctrl"><h1>{{ctrl.text}}</h1><my-dir text="ctrl.dirText"></my-dir><button ng-click="ctrl.click()">更改指令文本</button>

这里带有代码的代码笔.

解决方案

如果你严格想在指令中使用隔离的 scope 那么指令方法只能通过使用诸如 <代码>$broadcast &$emit

在您的情况下，您需要使用 $broadcast 将事件发送到整个 $rootScope

你的代码会变成这样.

工作代码笔

HTML

<div ng-controller="MyCtrl as ctrl"><h1>{{ctrl.text}}</h1><my-dir text="ctrl.dirText"></my-dir><button ng-click="ctrl.click()">更改指令文本</button>

代码

angular.module('myApp', []).控制器('MyCtrl'，函数($rootScope){var that = this;this.text = '控制器文本';this.dirText = '指令文本';this.click = function(){$rootScope.$broadcast('changeText',{});}}).指令('myDir'，函数(){返回 {限制:'E'，范围: {文字:'='},链接:功能(范围，元素，属性){scope.changeText = function(){scope.text = '新指令文本';};scope.$on('changeText',function(event, data){范围.changeText()});},模板:'<h2>{{text}}</h2>'};});

您需要广播一个事件，而不是调用子作用域的方法，该事件必须由指令作用域& 侦听.它将在侦听该事件后触发 changeText 方法.

注意

<块引用>

使用服务/工厂会是更好的方法.

希望对你有帮助.谢谢.

I am using AngularJS with the alias controllers pattern. I can't access (or I don't know how to) directive methods from a parent controller.

I have a function inside my controller that should call a directive method but this directive method is not available inside the this controller value.

This is what I have. What I am doing wrong?

JS

angular.module('myApp', []).

controller('MyCtrl', function(){
  this.text = 'Controller text';

  this.dirText = 'Directive text';

  this.click = function(){
    this.changeText();
  }
})

.directive('myDir', function(){
  return {
     restrict: 'E',
     scope: {
       text: '='
     },
     link: function(scope, element, attrs){
       scope.changeText = function(){
         scope.text = 'New directive text';
       };
     },
     template: '<h2>{{text}}</h2>'
  };
});

HTML

<div ng-app="myApp">
  <div ng-controller="MyCtrl as ctrl">
    <h1>{{ctrl.text}}</h1>
    <my-dir text="ctrl.dirText"></my-dir>
    <button ng-click="ctrl.click()">Change Directive Text</button>
  </div>
</div>

Here a codepen with the code.

解决方案

If you strictly want to use isolated scope inside a directive then the directive method can be only called by using angular events such as $broadcast & $emit

In your case, you need to use $broadcast to send event to entire $rootScope

You Code will become like this.

Working Code Pen

HTML

<div ng-app="myApp">
  <div ng-controller="MyCtrl as ctrl">
    <h1>{{ctrl.text}}</h1>
    <my-dir text="ctrl.dirText"></my-dir>
    <button ng-click="ctrl.click()">Change Directive Text</button>
  </div>
</div>

CODE

angular.module('myApp', []).

controller('MyCtrl', function($rootScope){
  var that = this;

  this.text = 'Controller text';

  this.dirText = 'Directive text';

  this.click = function(){
      $rootScope.$broadcast('changeText',{});
  }
}).

directive('myDir', function(){
  return {
     restrict: 'E',
     scope: {
       text: '='
     },
     link: function(scope, element, attrs){
       scope.changeText = function(){
         scope.text = 'New directive text';
       };
         scope.$on('changeText',function(event, data){
             scope.changeText()
         });
     },
     template: '<h2>{{text}}</h2>'
  };
});

Instead of calling method of child scope, you need to broadcast an event and that will have to be listened by the directive scope & it will fire changeText method after listening to that event.

NOTE

Using service / factory would be better approach.

This would be hopefully help you. Thanks.

这篇关于从 AngularJS 中的父控制器调用指令的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！