AngularJS - 指令之间的通信无法正常工作答案

【问题标题】：AngularJS - communication between directives not working properlyAngularJS - 指令之间的通信无法正常工作
【发布时间】：2015-10-29 08:36:02
【问题描述】：

我有以下html：

<div ng-controller="collapseController">
    <div><breadcrumb-visualiser breadcrumbs="breadcrumbs" /></div>

    <div id="partialViewContainer">
        <div id="personContainer" partial-view-loader view="person" parent="" breadcrumbs="breadcrumbs"></div>
    </div>
</div>

模板面包屑可视化器

<div style="width: 100%; background-color: #eee">
    <div ng-repeat="breadcrumb in breadcrumbs">
        <span class="customBreadcrumb"><a ng-href="" ng-click="">{{breadcrumb}}</a></span>
    </div>    
</div>

部分视图加载器

将 MVC 部分视图加载到包含的 div 中。加载部分视图将能够在屏幕上添加另一个（新）视图，同时隐藏前一个屏幕。

正如您在上面的 html 中看到的那样，该指令共享由 collapseController 提供的面包屑绑定。该指令将最新的面包屑（与刚刚加载的部分视图相关联）添加到现有的面包屑列表中，如下所示：

$scope.AddBreadCrumb = function (breadcrumb) {
    $scope.breadcrumbs.push(breadcrumb);
}

这是指令控制器中的一个函数。

问题

collapseController 用这个值 ['A', 'B'] 初始化面包屑。所以面包屑 A 和 B 会立即显示出来。

partial-view-loader第一次加载会添加面包屑C，导致：

['A', 'B', 'C'].

当我单击导致添加新视图的按钮时，我将再次触发 partial-view-loader，但现在是面包屑 D。

问题是它似乎没有更新面包屑。没有视觉上的变化。虽然在内部，已经进行了更改但不正确。

如果我像这样将日志记录添加到 AddBreadCrumb：

$scope.AddBreadCrumb = function (breadcrumb) {
    console.log($scope.breadcrumbs);
    $scope.breadcrumbs.push(breadcrumb);
    console.log($scope.breadcrumbs);
}

我得到以下输出：

before: ['A', 'B']
- push -
after: ['A', 'B', 'D']

问题

为什么添加的面包屑“C”没有保留，为什么没有显示新的面包屑列表（即使它不正确）？

【问题讨论】：

你能添加一个工作示例吗？
`我将再次触发部分视图加载器`你是怎么做的？
在 Plunker 中工作太复杂/复杂。

标签： javascript html .net asp.net-mvc angularjs

【解决方案1】：

回应 Divya：

self.AddChildByDirective = function (viewIdentifier, parentViewIdentifier) {
    var html = '<div id="' + viewIdentifier + 'Container" fvl-partial-view-loader view="' + viewIdentifier + '" parent="' + parentViewIdentifier + '" breadcrumbs="breadcrumbs" /></div>';

    var target = $('#partialViewContainer');

    var linkFunc = $compile(html);
    var content = linkFunc($scope);
    target.append(content);

    chainedScreensService.CollapsePartialByIdentifier(parentViewIdentifier);
}

构建、编译和附加新屏幕的指令代码（视图和父级不同）。

额外信息：

我已将两个指令的范围更改为 scope: false。这个想法是确保我使用的是控制器声明的变量，而不是孤立范围内的变量。零差异。

这是指令的当前代码：

面包屑可视化器

angular.module('directives.api').directive("breadcrumbVisualiser", [
    function () {
        return {
            restrict: 'E',
            scope: false,
            templateUrl: 'Templates/Directives/BreadcrumbVisualiser.html',
            controller: function () {
            },
            link: function (scope, element, attrs) {
            }
        }
    }
]);

partialViewLoader

angular.module('directives.api').directive("partialViewLoader", [
    '$compile',
    'chainedScreensService',
    function (
        $compile,
        chainedScreensService) {
        return {
            restrict: 'A',
            scope: false,
            controller: ['$scope', function ($scope) {
            }],
            link: function (scope, element, attrs) {
               chainedScreensService.GetPartialView(scope.activeView).then(function (viewData) {
                    $.post(viewData.Url, function(view) {
                        var linkFunc = $compile(view);
                        var content = linkFunc(scope);
                        element.append(content);

                        scope.AddBreadCrumb(viewData.Subject);
                    });
                });
            }
        }
    }
]);

scope.AddBreadCrumb(viewData.Subject) 是控制器中定义的函数。

【讨论】：