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()时发送参数。

在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 2

您可以在$ rootScope上使用$ broadcast

控制器中的

执行：

switch( rand() % 5 )
{
  case 0:
    strcpy( size, "XS" );
    break;

  case 1:
    strcpy( size, "S" );
    break;

// add code for remaining cases 
}

然后在你的目标控制器中有一个监听器：

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

this

和angularJS documentation $on

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

从指令到控制器获取价值

3 个答案: