javascript - AngularJS:如何在 HTML 中访问指令 Controller 的 $scope 属性

Question

我编写了一个 AngularJS 指令来显示表格。我在几页上使用了这些表，效果非常棒，现在我有一个页面需要此类表的两个实例。我是 AngularJS 的新手，也许它一开始就不是最好的选择，但到目前为止，我对这些表及其指令使用了 Controller 范围。当涉及到两个表时，当我更改一个表的页面时，它们的行为就像同一个表，另一个表的页面也会更改，因为它们共享相同的范围( Controller 的范围)。

我在指令声明中添加了范围属性，以接受来自 Controller 的items(这对于两个表来说都是通用的)，并且在指令的 Controller 中我声明了filteredItems(这不应该很常见，每个表都应该有自己的过滤项列表)指令范围的属性。

现在我的 Controller 是这样的:

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>

指令的 Controller 像以前一样执行得很好，但我的问题是，由于某种原因，在我的 html 中，我无法访问指令隔离范围的任何属性，并且无法访问这些 filteredItems。如果我将 data-ng-repeat="item in FilteredItems" 替换为 data-ng-repeat="item in items" ，它会显示内容，因为 View Controller 的范围具有该属性 item 但它不会迭代 filteredItems 这是指令范围的属性。并且无法从那里访问其他指令的范围属性，我检查了指令 html 内容中的范围 id，它与 View Controller 范围的 id 相匹配。为什么在指令的 html 中我处理 View Controller 的范围而不是指令的隔离范围？

Answer 1

我稍微调整了你的示例，结果如下:

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

基本上，它由以下部分组成:

• 一个 mytable 指令，它采用 items 数组并生成一个包含两行的表格 - 原始数字和奇数(过滤后的)数字
• 一项 dataProducer 服务，它生成一个包含 10 个元素的数组 - 每个元素都按索引时间提供的乘数进行计算。
• 具有几个数组、几个乘法器和相应观察器的 Controller 。

它的工作原理如下:您单击任何按钮，都会更改相应的乘数， Controller 的观察程序更新相应的数据行，指令的观察程序启动(因为数据行发生变化)并调用 $scope.search() 并修改本地范围的 filteredData 属性。页面上存在该指令的两个实例，并且不会发生作用域冲突。

如果我没记错的话，您正在尝试从外部 HTML 访问属于指令范围的属性。那根本行不通——根本没办法。如果您的指令内部计算了某些内容并且外部世界需要访问它 - 将此逻辑移至 Controller 。