从另一个访问和刷新指令

Question

我有一个由 2 个指令组成的页面：
人物Header
人物行动

我在 peopleAction 指令中做了一些处理
当这些处理结束时，我想更新 header 指令中的变量并刷新 header
任何帮助将不胜感激
非常感谢

Header 指令

app.directive("peopleHeader", [
        "ListeCmcQueryHelper", function(ListeQueryHelper) {
            return {
                templateUrl : "partials/people/peopleHeader.html",
                restrict : "E",
                link : function(scope) {

                    scope.nbPeople= ListeQueryHelper.totalRequested; // how to refresh this variable and so the view from PeopleActionDirective

                }
            };
        }
]);

Html 关联到 header 指令

<h3> {{'PEOPLE.TITLE' | translate}} </h3>
<h5> {{'PEOPLE.TOTAL' | translate }} : {{nbPeople.total}}</h5>

PeopleActionDirective

      app.directive("peopleAction", [
                "ListeQueryHelper", function(ListeQueryHelper) {
                    return {
                        templateUrl : "partials/people/peopleAction.html",
                        restrict : "E",
                        link : function(scope) {

                             scope.deletePeople= function() {
                             ListeQueryHelper.deletePeople();
                             scope.nbPeople= ListeQueryHelper.totalRequested;
                            // need to send this to HeaderDirective and so refresh the view
                          }

                        }
                    };
                }
        ]);

非常感谢

Answer 1

ListeQueryHelper是服务吧？如果不是，那就把它变成一个。

因此在您的两个指令中 scope.nbPeople 具有相同的引用：ListeQueryHelper.totalRequested。

在其中一个中更改它会反映在另一个中。因此，如果您在 ng-click 中调用 scope.deletePeople（自动为您调用 scope.$apply），您将能够在另一个指令中调用 scope.$watch('nbPeople', ...。或者只是将它绑定到模板 (<span>{{nbPeople}}</span>).

Answer 2

简而言之，link只运行一次。因此，在您的示例代码中，它只会从 ListeQueryHelper.totalRequested 中获取一次值。

解决方案一：使用“=”在 two way binding 中执行顺便说一句，如果您使用解决方案 1，则需要熟悉指令。请先阅读 link。

方案二：请改用对象。 scope.nbPeople=ListeQueryHelper.SomeObj 在 html 中：nbPeople.totalRequested

方案三：使用事件。

从另一个访问和刷新指令

access and refresh a directive from another

angularjs

angularjs-directive