Question

所以我有这个过滤器指令：

app.directive('filter', function(){
  return {
    restrict: 'E',
    transclude: true,
    scope: {
        callFunc: '&'
    },
    template:
            '   <div>' +
            '       <div ng-transclude></div>' +
            '   </div>',
    controller: function($scope, $element, $attrs){
        this.getData = function() {
            $scope.callFunc()
        }
    }
  }   
});

app.directive('positions', function(){
  return {
    require: '^filter', 
    scope: {
        selectedPos: '='
    },
    template:
            '  Positions: {{selectedPos}}' +
            '  <ul>' +
            '   <li ng-repeat="pos in positions">' +
            '           <a href="#" ng-click="setPosition(pos); posRegData()">{{pos.name}}</a></a>' +
            '       </li>' +
            '  </ul>',
    controller: function($scope, $element, $attrs){
          $scope.positions = [
            {name: '1'},
            {name: '2'},
            {name: '3'},
            {name: '4'},
            {name: '5'}
          ];
          $scope.selectedPos = $scope.positions[0].name;
          $scope.setPosition = function(pos){
            $scope.selectedPos = pos.name;
          };

    },
    link: function(scope, element, attrs, filterCtrl) {
        scope.posRegData = function() {
            filterCtrl.getData();
        }
    }
  }   
})

控制器：

app.controller('keyCtrl', ['$scope', function($scope) {
  var key = this;
  key.callFunc = function() {
    key.value = key.selectedPos;
    console.log(key.selectedPos)
  }
}]);

主要问题是为什么控制器中的key.selectedPos仅在第二次点击时获得正确的值？

这是plunker复制我的问题。

这样做的一种方法是在调用callFunc()

时发送一个参数

然后，我更新了ctrl：key.callFunc = function(filterParams)中的func，但是，我正在更新传递的方法call-func="key.callFunc(filterParams)

然后在filter directive中我将getData方法更改为：

this.getData = function(val) {
  $scope.callFunc({filterParams: val})
}

在positions directive中，我传递了我需要的值：

scope.posRegData = function() {
  filterCtrl.getData({position: scope.selectedPos});
}

最后，在keyCtrl中，我得到了这样的值：

key.callFunc = function(filterParams) {
  key.value = filterParams.position;
  console.log(filterPrams.position)
}

以下是展示此尝试的plunker。

在这种情况下的问题是，如果这是一种很好的方法，请记住它在一个非常大的应用程序中。

Answer 1

那是因为孤立的范围如何运作。父摘要（在您的情况下为控制器）将在摘要周期运行时更新，即在ng-click函数callFunc之后。因此，您可以将callFunc代码放在$timeout中，它会起作用（但会导致另一个摘要周期）。

另一个解决方案是将值放在一个对象中，因此当您更改对象时，控制器（具有引用）将立即看到更新：

在控制器中：

key.selectedPos = { value: {}};

key.callFunc = function() {
    key.value = key.selectedPos.value;  
    console.log(key.selectedPos.value)
}

在指令中：

$scope.selectedPos.value = $scope.positions[0].name;
$scope.setPosition = function(pos){
    $scope.selectedPos.value = pos.name;
};

请参阅此plunker。

AngularJS中指令通信的指令

1 个答案: