与法AngularJS指令从外面叫 [英] AngularJS directive with method called from outside

问题描述

我创建一个指令与应从不属于该指令的一部分，其它元件被称为方法。然而，它看起来像这样方法不会露出。

的一些示例玉code澄清：的

  //  - 视图本身的控制器
DIV（NG-控制器=someController）    //  - 这是视图本身的一部分，而不是指令中
    DIV（NG-重复=中的元素元素）
        DIV（NG-点击=methodFromDirective（元素）），单击元素{{$指数}}触发指令    //  - 这是指令
    格（一些指导性）
 

的 someController 不是太重要了，我认为。它的方法，而不是 methodFromDirective（元素）之一。在 methodFromDirective（元素）是只存在于指令的方法。

如果我做一个指令，并把一些日志记录创造我可以​​清楚地看到它的创建。然而， methodFromDirective（元素）方法不公开，因此呼叫不正确引起的。

的 methodFromDirective（元素）本身将只从要素指令的模板中工作。

的部分的CoffeeScript显示的定义指令（忽略这里的缩进错误）：的

 使用严格
定义[]，（） - ＆GT;someDirective =（） - ＆GT;
    限制：'A'
    范围： {
        显示：'='
    }
    transclude：假的
    templateUrl：someTemplateHere.html    控制器=（$范围） -  GT;       ＃在这里揭露的方法
       $ scope.methodFromDirective（元素） -  GT;
           $ scope.theMethod元素    链接=（范围，元素，属性） -  GT;       ＃这是记录
       的console.log的init someDirective       ＃触发这个方法的形式之外失败
       scope.theMethod =（元素） -  GT;
          的console.log法元素触发，JSON.stringify（元）
 

解决方案

我发现我的问题即可。

的指令文件angularJS 我一直在寻找到 transclude 自认为选择的国家：

  

这是什么 transclude 选项做，到底是什么？ transclude使得指令使用此选项的内容有指令的外部，而不是内部访问范围。

我结合 transclude = FALSE 与控制器函数，因为从文档公开的方法，再次：

  

精明的读者可能会问有什么区别链接和控制器之间。基本的区别是，控制器可以公开的API，并链接功能可以使用控制器需要互动。

然而我错过完全是我孤立我的指令中范围即可。从文档：

  

我们希望能够做的是独立于外的范围内指令的范围，然后映射外范围，指令的内部范围。我们可以通过建立我们所说的分离范围内做到这一点。要做到这一点，我们可以使用一个指令的作用域选项：

所以，即使你使用 transclude = FALSE 和控制器函数，你还是会失败，如果暴露方法你用孤立的范围内！教训！

虽然搞清楚什么地方出错了我也做了捣鼓更好地理解： http://jsfiddle.net/qyBEr/1/

的 HTML 的

 ＆LT; D​​IV NG-应用=directiveScopeExample＆GT;    ＆LT; D​​IV NG控制器=CTRL1＆GT;        ＆LT; P＆GT;看看我们是否能够触发的方法形成存在于指令控制器＆LT; / P＆GT;        ＆LT; UL＆GT;
            ＆LT;立GT;＆LT;在控制器和LT法; A HREF =＃NG点击=methodInController（）＆GT / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT;在指令下与方法; A HREF =＃NG点击=methodInDirective（）＆GT / A＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;    ＆LT;简单指令/＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

的的JavaScript 的

  angular.module（'directiveScopeExample'，[]）  .controller（CTRL1，功能CTRL1（$范围）{      $ scope.methodInController =功能（）{
          警报（'在控制器方法触发'）;
    };  }）
  .directive（'simpleDirective'，函数（）{      返回{
      限制：'E'，
      transclude：假的，      控制器：函数（$范围）{
          $ scope.methodInDirective =功能（）{
              //调用在范围，而仅在指令中定义的方法，beause上的$范围的链接函数中定义这个露出
              $ scope.showMessage（法指令触发'）;
          }
      }
      //这是问题，创建一个新的范围prevents控制器来调用指令的方法
      //， 范围： {
      //标题：'@'
      //}
      ，链接：功能（范围，元素，ATTRS，tabsCtrl）{
         //查看相关code在这里
          scope.showMessage =功能（消息）{
              警报（消息）;
          }
      }，
      // templateUrl：一些模板，here.html
     };
  }）
 

I created a directive with a method that should be called from other elements that are not part of the directive. However it looks like this method is not exposed.

Some example jade code to clarify:

//- a controller for the view itself
div(ng-controller="someController")

    //- this is part of the view itself, not within the directive
    div(ng-repeat="element in elements") 
        div(ng-click="methodFromDirective(element)") click element {{$index}} to trigger directive

    //- this is the directive
    div(some-directive)

The someController isn't too important here I think. It has methods but NOT the methodFromDirective(element) one. The methodFromDirective(element) is a method that exists only in the directive.

If I make a directive and put some logging on creation I can clearly see it's created. However the methodFromDirective(element) method isn't exposed so the calls aren't properly triggered.

The methodFromDirective(element) itself will only work on elements from within the directive's template.

some coffeescript to show the definition of the the directive (ignore indentation errors here):

'use strict'
define [], () ->

someDirective = () ->
    restrict: 'A'
    scope: {
        show: '='
    }
    transclude: false
    templateUrl: 'someTemplateHere.html'

    controller = ($scope)  ->

       # exposing the method here
       $scope.methodFromDirective(element)->
           $scope.theMethod element

    link = (scope, element, attr) ->

       # this is logged
       console.log "init someDirective"

       # triggering this method form outside fails
       scope.theMethod = (element)->
          console.log "method triggered with element", JSON.stringify(element)

解决方案

I found my issue.

From the angularJS documentation on directives I was looking into the transclude option since that states:

What does this transclude option do, exactly? transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside.

I combined transclude=false with the controller function since that exposes the method, again from docs:

Savvy readers may be wondering what the difference is between link and controller. The basic difference is that controller can expose an API, and link functions can interact with controllers using require.

However what I missed completely was that I isolated scope within my directive. From docs:

What we want to be able to do is separate the scope inside a directive from the scope outside, and then map the outer scope to a directive's inner scope. We can do this by creating what we call an isolate scope. To do this, we can use a directive's scope option:

So even if you use transclude=false and the controller function you'll still fail to expose methods if you use isolated scope! Lesson learned!

While figuring out what went wrong I also made a fiddle for better understanding: http://jsfiddle.net/qyBEr/1/

html

<div ng-app="directiveScopeExample">

    <div ng-controller="Ctrl1">

        <p>see if we can trigger a method form the controller that exists in the directive.</p>

        <ul>
            <li><a href="#" ng-click="methodInController()">Method in Controller</a></li>
            <li><a href="#" ng-click="methodInDirective()">Method in Directive</a></li>
        </ul>

    <simple-directive/>
    </div>
</div>

javascript

angular.module('directiveScopeExample', [])

  .controller('Ctrl1', function Ctrl1($scope) {

      $scope.methodInController = function(){
          alert('Method in controller triggered');
    };

  })
  .directive('simpleDirective', function(){

      return {
      restrict: 'E',
      transclude: false,

      controller: function($scope){
          $scope.methodInDirective = function(){
              // call a method that is defined on scope but only within the directive, this is exposed beause defined within the link function on the $scope
              $scope.showMessage('Method in directive triggered');
          }
      }
      // this is the issue, creating a new scope prevents the controller to call the methods from the directive
      //, scope: {
      //  title: '@'
      //}
      , link: function(scope, element, attrs, tabsCtrl) {
         // view related code here
          scope.showMessage = function(message){
              alert(message);
          }
      },
      //templateUrl: 'some-template-here.html'
     };
  })  

这篇关于与法AngularJS指令从外面叫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！