Question

我有一个指令，它基本上只是一个包含多个参数的搜索框。在控制器中，搜索功能需要访问名为getOptions()的函数，该函数用于获取搜索框设置。目前，我使用默认的scope: false并在指令中使用$scope.getOptions() = function()....来实现此目的。

这是一个示例代码段（我没有代码在我面前，所以我按内存进行，这可能在语法上不正确，但确实有效）

angular.module('example', [])
  .controller('Controller', ['$scope', function($scope) {
  function search() {
    //do something using $scope.getOptions()
  }
  // other functions that modify $scope.someParameter1 ....
  }])
  .directive('searchBox', function() {
    return {
      restrict: 'E',
      templateUrl: 'someurl.html'
      link: link
    };

    function link($scope) {
      $scope.someParameter1 = something;  // the default
      $scope.someParameter2 = something;  // the default
      $scope.getOptions() = function () {
        //do something with parameters
      }
    }
  });

然而，这是不好的做法，如果我在同一页面上有多个搜索框，它就不起作用，所以我尝试使用scope: {}的隔离范围。我可以将参数保留在控制器中并将其传递到getOptions()函数中，而不是依赖于$scope属性，但我不知道如何从getOptions()调用getOptions()控制器。我无法从控制器移动{{1}}因为它在指令中调用了几个函数。

感谢。

Answer 1

您*不能直接从隔离范围调用方法，但我们可以撤消我们的流程。我们将观察传递给指令的其他属性的更改。

指令概念证明

.directive('box', function() {
    return {
        scope: {
            outsideScope: '=box'
        },
        template: 'directive box <br> isolated method: {{ wasCalled }}',
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch('outsideScope', function(newValue, oldValue) {
                if(newValue !== oldValue) {
                    try {
                        scope[newValue](); // I'm going to call method with the name as passed string from controller
                    } catch(e) {
                        console.error(e);
                    }     
                }
            });
            scope.wasCalled = 'wasnt called';
            scope.isolateMethod = function() {
                scope.wasCalled = 'was called';
            }
        }
    }
});

控制器的一部分

controller('foo', function foo($scope) {
    $scope.changeOutsideScope = function() {
        $scope.outsideScope = 'isolateMethod';
    }
});

HTML

<div ng-controller="foo">
    <button ng-click="changeOutsideScope()">Call</button>
    <div class="directive" box="outsideScope"></div>
</div>

*您可以在测试中作为Angular提供.isolateScope()方法，您可以在编译元素上调用该方法来检索指令范围。

jsfiddle：http://jsfiddle.net/krzysztof_safjanowski/P8ajy/

AngularJS：从具有隔离范围的控制器调用指令中的函数

1 个答案:

指令概念证明

控制器的一部分

HTML