Question

在我在$scope上设置属性时，以及在控制器原型上设置属性时，我都无法识别未发生的视图更新。

我已经快速example了解我正在做的事情来解释这个问题。

我有，例如以下观点：

<html data-ng-app="test">
    <head>
        <script data-require="angular.js@1.2.18" data-semver="1.2.18" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Hello Plunker!</h1>

        <div data-catalog="{ 'type': 'Category1', 'key': '252' }">

            <span class="text-danger">{{query | json}}</span>
            <span class="text-danger">{{catalog.model | json}}</span>

        </div>

    </body>
</html>

带有指令和控制器的简单模块：

angular
    .module("test", [])
    .controller("CatalogCtrl", ["$scope", "$parse", "$location", "$q", function ($scope, $parse, $location, $q) {

        var catalog = this,
            listener = function () {

                var query = {},
                params = $location.search();

                try
                {
                    query = $parse($scope.query)();
                }
                catch (exception)
                {
                    console.error(exception);
                }

                if (_.isEmpty(query))
                {
                    return;
                }

                $q
                    .all([
                        scroll({ top: 0 }),
                        Catalog.searchProducts(_.assign(query, params))
                    ])
                    .then(function (response) {
                        catalog.model = response[1];

                        console.log(catalog.model, response[1]);
                    })
                    .catch(function () {
                        catalog.model = {};
                    })
                    .finally(function () {});
            };

        catalog.model = {test:""};

        //$scope.listen("$locationChangeSuccess", listener);
    }])
    .directive("catalog", function () {

        return {
            controller: "CatalogCtrl as catalog",
            scope: {
            query: "@catalog"
            },
            restrict: "A",
            replace: false
        };
    });

问题在于{{query | json}}和{{catalog.model | json}}都没有在视图中呈现，我不确定它的原因是什么。这可能是我遗漏或做错的事情，但如果有人发现我的错误，我可以使用它的一些帮助：）

Answer 1

您的代码存在一些问题......

<强> 1

您的指令附加了controlelr并且您在其范围（查询，目录等）上放置了一些值。然后，您尝试从指令之外的元素访问这些值（因此具有对query，catalog等一无所知的不同范围。等等。

<!-- Let's say somehow DIV#1 has scope $001 -->
<div id="1">

    <!-- Somehow DIV#1.1 creates a new scope ($002) -->
    <div id="1.1" some-directive>

        <!-- DIV#1.1.1 will have access to scope $002 -->
        <!-- (under certain cirsumstances) -->
        <div id="1.1.1"></div>

    </div>

    <!-- DIV#1.2 (which is outside of DIV#1.1) -->
    <!-- will have access to scope $001 (but not $002) -->
    <div id="1.2"></div>

</div>

<强> 2

为了使事情变得更复杂，你的指令创建了一个隔离范围，这意味着它拥有的任何内容都不会看到你的指令的范围，而是它的父范围。即在上面的例子中，DIV＃1.1.1可以访问范围$ 001，而不是$ 002。

你可以做些什么（基本上是指，明确说明你的指令的内容应该被包含（转换）到它的模板中。这使你可以更好地控制正在发生的事情，并允许你将指令的内容绑定到您想要的范围（即您的指令的隔离范围）。

生成的代码应如下所示：

<div data-pj-catalog="{ 'type': 'Category1', 'key': '252' }">
    ...
    <div class="col-12">
        ...
        <span class="text-danger">{{query | json}}</span>
        <span class="text-danger">{{catalog.model | json}}</span>
        ...
    <div>
</div>

.directive('pjCatalog', function () {
    return {
        restrict: 'A',
        transclude: true,
        template: '<div ng-transclude></div>',
        controller: 'CatalogCtrl',
        scope: {
            query: '@pjCatalog'
        },
        link: function (scope, elem, attrs, ctrls, transFn) {
            transFn(scope, function (cloned) {
                elem.empty().append(cloned);
            });
        }
    };
})

另请参阅此 short demo 。

<子> 注意：
这被视为＆＃34;高级＆＃34;指令的东西（所以它听起来（并且是）比大多数指令的东西复杂得多）并且仅在rae情况下需要我很确定有一种更简单的方法来实现您想要的（例如使用非隔离范围）稍作修改（但我不确定您想要什么以便进一步提供帮助。

视图不会使用范围或控制器属性进行更新

1 个答案: