指令与分离范围与AngularJS

Question

我读过一些类似的回答我的问题控制器通信，如this one虽然不能将其翻译成我自己的要求 - 来自缺乏了解......

我有一个控制器：

appControllers.controller('TransactionsCtrl', ['$scope', 'InfiniteScrollingDataService', function ($scope, dataService) { 
    // setup our scope properties 
    $scope.$root.title = 'Transactions'; 
    var urlQuery = { 
     skip: 0, 
     take: 25, 
     search: '', 
     order: 'DateTimeCreated', 
     orderBy: 'desc', 
     transactionTypeID: null, 
     transactionStatusID: null 
    }; 
    var apiUrl = 'api/transactions'; 
    $scope.transactions = new dataService(apiUrl, urlQuery); 

    $scope.Filter = function (senderParent, type, id) { 
     $scope.FilterApplied = true; 
     console.log('filter in controller: ' + senderParent + ' ' + type + ' ' + id); 
    } 
}]); 

而且我有一个指令：

appDirectives.directive('bootstrapListItems', ['$rootScope', function ($rootScope) { 

    return { 
     restrict: 'A', 
     templateUrl: 'bootstrapDropDownItems.html', 
     link: function (scope, element, attrs) { 

      scope.type = attrs.useGlobaljsonObject; 
      scope.parentElement = attrs.id; 
      scope.items = []; 

      var obj = $rootScope.globalJSON[scope.type]; 

      for (o in obj) { 
       scope.items.push({ key: o, value: obj[o] }) 
      } 
     }  
    } 

}]); 

而对于我的指令模板：

<script type="text/ng-template" id="bootstrapDropDownItems.html"> 

    <li class="active"><a href="#" class="lnkFilterList">- Any -</a></li> 
    <li ng-repeat="item in items"> 
     <a href="#" class="lnkFilterList" ng-click="Filter(parentElement, type, item.key)">{{item.value}}</a> 
    </li> 

</script> 

如果我不隔离指令的作用域，那么控制器被调用正确，我看到控制台注销我的参数。

但是，我（想）我需要隔离范围，因为该页面上会有这个指令的倍数。

当我添加scope: {}到我的指令控制器功能不再被调用。

我也尝试将我的ng-click更改为ng-click="$parent.Filter(.....)" - 这似乎也没有工作。

任何人都可以请我指出正确的方向吗？

Answer 1

ng-click="$parent.Filter(.....)"不起作用，因为您在ng-repeat中创建了一个（非隔离）范围。在这种情况下，你会写

ng-click="$parent.$parent.Filter(.....)" 

，但不这样做......

你可以发出在单击事件处理程序的事件，并在控制器中侦听它。

<script type="text/ng-template" id="bootstrapDropDownItems.html"> 

    <li class="active"><a href="#" class="lnkFilterList">- Any -</a></li> 
    <li ng-repeat="item in items"> 
     <a href="#" class="lnkFilterList" ng-click="onClick(parentElement, type, item.key)">{{item.value}}</a> 
    </li> 

</script> 

指令：

appDirectives.directive('bootstrapListItems', ['$rootScope', function ($rootScope) { 

    return { 
     restrict: 'A', 
     templateUrl: 'bootstrapDropDownItems.html', 
     link: function (scope, element, attrs) { 

      scope.type = attrs.useGlobaljsonObject; 
      scope.parentElement = attrs.id; 
      scope.items = []; 

      var obj = $rootScope.globalJSON[scope.type]; 

      for (o in obj) { 
       scope.items.push({ key: o, value: obj[o] }) 
      } 
      scope.onClick = function(){ 
       // pass an array of original arguments to the event 
       scope.$emit('someEventName', Array.prototype.slice.call(arguments)); 
      }; 
     }  
    } 

}]); 

控制器：

appControllers.controller('TransactionsCtrl', ['$scope', 'InfiniteScrollingDataService', function ($scope, dataService) { 
    // setup our scope properties 
    $scope.$root.title = 'Transactions'; 
    var urlQuery = { 
     skip: 0, 
     take: 25, 
     search: '', 
     order: 'DateTimeCreated', 
     orderBy: 'desc', 
     transactionTypeID: null, 
     transactionStatusID: null 
    }; 
    var apiUrl = 'api/transactions'; 
    $scope.transactions = new dataService(apiUrl, urlQuery); 

    $scope.$on('someEventName', function(e, args){ 
     // call the $scope.Filter function with the passed array of arguments 
     $scope.Filter.apply(null, args); 
    }); 
    $scope.Filter = function (senderParent, type, id) { 
     $scope.FilterApplied = true; 
     console.log('filter in controller: ' + senderParent + ' ' + type + ' ' + id); 
    } 
}]); 

Answer 2

拥有在多个地方使用，并不意味着你不能使用共享范围的指令。如果指令总是显示相同的状态（因此每个继承和操作控制器的相同属性），或者它们每个都打算显示它们自己的状态版本（因此被隔离），那么这个决定归结为。因为你在$ scope.FilterApplied中设置了一个控制器级变量，我假设你只是想在页面上重复相同的控件？如果是这样，你可以坚持一个继承范围。

如果不是，每个指令都需要它自己的功能，您最好将Filter代码移动到指令和控制器都注入的服务中，以便实用程序功能可以共享，但设置和过滤器的状态是根据范围而不是共享的。

最终取决于你如何使用它。