从指令中获取值到控制器中

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

您可以在 $rootScope 上使用 $broadcast

在你的控制器中做：

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

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

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

angularJS documentation $on

和一个plunker

Answer 2

如建议的那样，我认为隔离作用域有效：

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

Answer 3

您可以在调用 callFunc() 时发送参数。

在 ctrl 中更新您的函数：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

从指令中获取值到控制器中

Get value from Directive into Controller

angularjs

angularjs-directive

angularjs-scope

angularjs-controller