Javascript AngularJS：如何访问指令控制器&x27；HTML中的s$scope属性

我已经编写了一个用于显示表的AngularJS指令。我在几页上使用了这些表，它非常棒，现在我有了一个页面，需要两个这样的表的实例。我是AngularJS的新手，也许它一开始并不是最好的选择，但到目前为止，我使用了这些表及其指令的控制器范围。当涉及到两个表时，当我为一个表更改页面时，它们的行为就像同一个表，而另一个表的页面也会更改，因为它们共享相同的作用域（控制器的作用域）

我在指令声明中添加了scope属性，以接受来自控制器的

项

（这对于两个表都应该是公共的），并且在指令的控制器中，我声明了指令范围的

过滤数据项

（这不应该是公共的，每个表都应该有自己的过滤项列表）属性

现在我的控制器是这样的：

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中我处理的是视图控制器的作用域而不是指令的隔离作用域？

我认为您不能像这样从指令外部访问指令的隔离作用域。您能让指令像这样包装表格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);
        }
    }
  };

指令（'abTable'，函数（$filter）{ 返回{ 限制：“A”， 替换：正确， 范围：{ 项目：'=项目'， searchKeywords:'=searchKeywords' }, 模板：{{item.id}{{item.value}}， 控制器：函数（$scope$filter）{ $scope.filteredItems=[]； $scope.$watch（'items'，function（）{ $scope.search（）； }); $scope.search=函数（）{ $scope.filteredItems=$filter（“filter”）（$scope.items，$scope.searchKeywords）； } } };

---

显示了两个使用相同项的表，它们的过滤方式不同。

我稍微调整了一下您的示例，结果如下：

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

• 一个

  mytable

  指令，它接受

  items

  数组并生成一个包含两行的表-原始数字和奇数（过滤）数字
• 作为一个

  dataProducer

  服务，它生成一个由10个元素组成的数组——每个元素都作为提供的索引倍计算
• 带有一对阵列、一对乘法器和相应观察者的控制器

它的工作原理是这样的：您单击任何按钮，更改相应的乘数，控制器的观察程序更新相应的数据行，指令的观察程序启动（因为数据行更改）并调用

$scope.search（）

这将修改本地作用域的

Filteredata

属性。此指令的两个实例出现在页面上，并且不会发生作用域冲突

---

如果我没有弄错的话，您正试图从外部的HTML访问属于某个指令范围的属性。这根本不起作用-根本不可能。如果您的指令内部计算了某些内容，而外部世界需要访问这些内容，请将此逻辑移到控制器上。

谢谢，这很有帮助。我从这些内容中了解到的是我的回答是，我应该始终使用模板作为指令。实际上，我打算稍后将代码移动到模板中，但我不知道html是在模板中还是在指令中是重要的。