指令與分離範圍與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代碼移動到指令和控制器都注入的服務中，以便實用程序功能可以共享，但設置和過濾器的狀態是根據範圍而不是共享的。

最終取決於你如何使用它。