Question

给出JQuery UI按钮的这个相当简单的角度包装器：

angular.module('Sample.controllers', [])
  .controller('mainController', ['$scope',
    function($scope) {
      $scope.jump =  function () {alert("jump");};
   }])
  .directive('jquiwButton', function() {
    return {
      scope: {},
      restrict: 'A',
      replace:true,
      link: function(scope, element, attrs) {
        var options = {};
        if (angular.isDefined(attrs["jquiDisabled"])) {
          options.disabled = attrs["jquiDisabled"];
        }

        if (angular.isDefined(attrs["jquiIconPrimary"])) {
          if (!angular.isDefined(options.icons.primary)) {
            options.icons ={};
          }
          options.icons.primary = attrs["jquiIconPrimary"];
        }

        if (angular.isDefined(attrs["jquiIconSecondary"])) {
          if (!angular.isDefined(options.icons.secondary)) {
            options.icons ={};
          }
          options.icons.secondary = attrs["jquiIconSecondary"];
        }

        if (angular.isDefined(attrs["jquiLabel"])) {
          options.label = attrs["jquiLabel"];
        }

        if (angular.isDefined(attrs["jquiText"])) {
          options.text = attrs["jquiText"];
        }

        element.button(options);
      }
    };
  });
  angular.module('Sample', ['Sample.controllers']);

标记。

<body ng-controller="mainController"> 
  <button jquiw-button jqui-label="Hello" ng-click="jump()">Hello</button>
</body>

它工作正常，直到我添加一个范围，此时我失去了使用标准角度绑定到外部范围的能力。在我的情况下，标记`ng-click ='jump（）'现在不起作用，因为它找不到在外部上下文中定义的方法跳转，而不是在隔离范围中定义。现在我知道我可以专门绑定ng-click回到外部作用域但是我想避免这样做，因为它需要知道我可能需要绑定的所有可能的指令。

所以我的问题是：如果仍有隔离范围，我如何让其他指令在外部作用域中起作用？

plunker：http://plnkr.co/edit/eRoOeq?p=preview

删除第8行：scope: {},并按住ng-click调用正确的函数。

Answer 1

使用ng-click="$parent.jump()"。

Answer 2

您可以使用&绑定从隔离范围内引用父作用域中的函数。这是从指令according to the directive documentation内的隔离范围调用函数的正确方法。

我创建了一个working CodePen example来证明它能够完美运行。

以下是相关部分：

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

app.controller('MainCtrl', function($scope) {
  $scope.jump = function() {
    alert('jump called');
  };
});

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      call: '&'
    },
    link: function postLink(scope, element, attrs) {
      scope.call();
    }
  };
});

并在模板中：

<section ng-app="app" ng-controller="MainCtrl">
  <my-directive call="jump()"></my-directive>
</section>

我希望这会有所帮助。

指令中的角度范围

2 个答案: