AngularJS：如何在HTML中訪問指令控制器的$ scope屬性

Question

我寫了一個用於顯示表的AngularJS指令。 我在幾頁上使用了這些表，它的功能很棒，現在我有一個頁面需要兩個這樣的表實例。 我是AngularJS的新手，也許一開始並不是最佳選擇，但到目前為止，我已將控制器范圍用於這些表及其指令。 當涉及到兩個表時，當我為一個表更改頁面時，它們的行為就像同一個表，而另一個更改了它的頁面，因為它們共享相同的作用域（控制器的作用域）。

我在指令聲明中添加了scope屬性，以接受來自控制器的items （這兩個表應該是相同的），並且在指令的控制器內我聲明了filteredItems （這應該是不常見的，每個表應該具有自己的過濾后的項目列表）指令的范圍。

現在我的控制器如下所示：

function ($scope, sgtService, ...) {
    sgtService.getList(function (data) {
        $scope.items = data;
    });

    ...
}

我的指令聲明是：

abTable: function () {
    return {
        restrict: "A",
        scope: {
            items: '='
        },
        controller: function ($scope, $filter) {
            $scope.filteredItems = [];

            $scope.$watch('items', function () {
                $scope.search();
            });

            $scope.search = function () {
                $scope.filteredItems = $filter("filter")($scope.items, $scope.searchKeywords);
            }

            ...
        }
    };
}

我的HTML是：

<div data-ab-table="" data-items="items">

    ...

    <tbody>
        <tr data-ng-repeat="item in filteredItems">

        </tr>
    </tbody>

    ...

</div>

指令的控制器像以前一樣執行得很好，但是我的問題是，由於某種原因，在我的html中，我無法訪問指令隔離范圍的任何屬性，也無法訪問這些filteredItems 。 如果我將data-ng-repeat="item in filteredItems"替換為data-ng-repeat="item in items"它會顯示內容，因為視圖控制器的作用域具有該屬性item但不會遍歷該屬性的filteredItems指令范圍。 而且沒有其他指令的作用域屬性可以從那里訪問，我檢查了指令html內容中的作用域ID，它與視圖的控制器作用域的ID相匹配。 為什么在指令的html中我要處理視圖控制器的作用域而不是指令的隔離范圍？

Answer 1

我認為您無法像這樣從指令外部訪問指令的隔離范圍。 您能否使指令像這樣包裝表格HTML：

.directive('abTable', function($filter){
  return {
    restrict: "A",
    replace: true,
    scope: {
      items: '=items',
      searchKeywords: '=searchKeywords' 
    },
    template: '<table><tr data-ng-repeat="item in filteredItems"><td>{{item.id}}</td><td>{{item.value}}</td></tr></table>',
    controller: function ($scope, $filter) {
        $scope.filteredItems = [];

        $scope.$watch('items', function () {
          $scope.search();
        });

        $scope.search = function () {
          $scope.filteredItems = $filter("filter")($scope.items, $scope.searchKeywords);
        }
    }
  };

本示例顯示了兩個使用相同項目進行過濾的表。

Answer 2

我稍微調整了您的示例，結果如下：

http://jsfiddle.net/nmakarov/E5dm3/4/

基本上，它包括以下內容：

• 一個mytable指令，它接受items數組並生成一個包含兩行的表-原始數字和奇數（已過濾）
• 一個dataProducer服務，它產生一個包含10個元素的數組-每個元素都將提供的乘數作為索引時間進行計算。
• 帶有幾個數組，幾個乘法器和相應觀察器的控制器。

它的工作方式如下：單擊任何按鈕，更改相應的乘數，控制器的觀察程序更新相應的數據行，指令的監視程序啟動（因為數據行更改），並調用$scope.search()並修改本地范圍的filteredData屬性。 頁面上存在此指令的兩個實例，並且沒有發生作用域沖突。

而且，如果我沒記錯的話，您嘗試從外部HTML訪問屬於指令范圍的屬性。 那根本行不通-只是沒有辦法。 如果您的指令內部計算出某些內容，並且外界需要訪問該指令，請將此邏輯移至控制器。