Question

我有以下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提供的breadcrumbs绑定。该指令将最新的痕迹导航（与刚刚加载的局部视图相关联）添加到现有的痕迹清单列表中，如下所示：

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

这是指令控制器中的一个功能。

问题

collapseController使用此值['A'，'B']初始化面包屑。所以面包屑A和B立即显示出来。

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

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

当我点击导致添加新视图的按钮时，我将再次触发部分视图加载器，但现在是针对痕迹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”，为什么没有显示新的痕迹清单（即使它不正确）？

Answer 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);
}

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

额外信息：

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

这是指令的当前代码：

<强> breadcrumbVisualiser

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）是控制器中定义的函数。

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

1 个答案: