Question

控制器外的html元素如何与给定的控制器通信？情况如下：

＆lt; button name =“search”＆gt;搜索＆lt; / button＆gt; - ＆GT;在现有框架提供的现有布局中

＆lt; div ng-app ng-controller =“overviewCtrl”＆gt;

＆lt; div ng-view＆gt; / div＆gt; - ＆GT;这个获得一个特定的控制器

＆LT; / DIV＆GT;

＆lt; button name =“search”＆gt;搜索＆lt; / button＆gt; - ＆GT;在现有框架提供的现有布局中

我无法控制控制器外部按钮的位置。我可以在其上放置属性，我想放置一个ng-click属性。它也不属于ng-app。

我可以把控制器放在上面。但后来我需要一种方法来引用同一个控制器。这样做的最佳方式是什么？

Answer 1

执行此操作的一种方法是在Angular控制器中使用JQuery，通过JQuery选择器和单击事件将ng-app外部的元素绑定到作用域函数。

Answer 2

您无法控制其位置，但您可以通过某种方式控制其渲染？你说你可以点击它吗？

我问，因为如果这是真的，那么这里很容易躲闪。您可以制作一个基本上是“智能点击”的简单指令。使用ng-click的问题实际上很难将其调用路由到控制器，因为按钮位于其他位置。那么，你所需要的只是弥合两者的一种方式。

它看起来像这样：

angular.module('myApp', [])

  .controller('MyController', ['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.$on('SearchButtonClicked', function() {
      // I will be called whenever the search button is clicked...
      // and I am in my controller!
    });
  }])

  .directive('notifySearchClick', ['$rootScope', function($rootScope) {
    return {
      restrict: 'A',
      link: function($scope, iElement) {
        iElement.bind('click', function() {
          $rootScope.$emit('SearchButtonClicked');
        });
      }
    };
  }]);

工作Plunkr在这里展示了这个概念：

http://plnkr.co/edit/dKuDl5?p=preview

jQuery方式也完全有效，但是你又回到了“神秘事件处理程序在这个元素上”的情况。它有效，而且可靠......但是如果你想保持AngularJS的理念，使用像上面这样的指令可以给你很大的灵活性。

请注意，在上面的Plunkr参考中，我添加了一点点复杂性。在该示例中，我将消息名称作为属性。因此，您可以在将来对任何其他情况使用单个指令。只需将消息名称放入属性中，如下所示：

<button notify-click="MyButtonNameClick"></button>

外部控制器通信

2 个答案: