获得价值为控制器

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复制我的问题。

Answer 1

当你打电话给你callFunc()您可以发送PARAM。

更新您的CTRL FUNC：key.callFunc = function(filterParams)，也不要忘了更新您传递方法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 2

您可以使用在$ rootScope

$广播在你的控制器做：

$rootScope.$broadcast('myEvent', $scope.selectedPos); 

在你的目标控制器

你再有一个听众：

$scope.$on('myEvent', function(event, myData){...}) 

angularJS documentation $on

和plunker

Answer 3

至于建议，我认为一个孤立的范围工作：

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

参见：http://plnkr.co/edit/boKjmMmsCCZem0lETT3B?p=preview