Question

目前情况：

我有两个指令：

来自GitHub的模态对话框，其中包含完整性the code of the modal以及JSBin中的示例。

自定义指令，分支查找器，具有以下指令代码。

angular.module('sfNgBranchFinder', ['sfNgFieldWrapper', 'sfNgLabelsService'])
.directive('sfNgBranchFinder', function (sfNgLabelsService, sfNgBranchService) {
    return {
        restrict: 'A',
        required: '^modal-dialog',
        scope: {
            show: '=',
            submitted: '@',
            branchFinderTitle: '@'
        },
        link: function (scope, element, attrs) {
            //Check the getLabel function in the branchfinder and 
            scope.getLabel = function (key) {
                return sfNgLabelsService.getLabel(key);
            }
                scope.getErrorLabel = function (key) {
                var errorLabelKey = scope.errorLabelKey;
                if (!errorLabelKey) {
                    errorLabelKey = 'EM_' + scope.labelKey;
                }
                return sfNgLabelsService.getLabel(errorLabelKey + "_" + key);
            }
            scope.searchBranch = function (branchFinderForm) {
                alert("searching!");
            }

            return scope.hideModal = function () {
                scope.modalShown = false;
                return scope.show = false;
            }
        },
        templateUrl: '/SFF/Content/UILib/3.0.0/directives/templates/sf-ng-    branchfinder.tpl.html'
    };
});

在我的html中，这看起来像：

<modal-dialog show='modalShown' width='500px' class="sf-dialog">
    <div sf-ng-branch-finder branch-finder-title="Find your branch" show='modalShown' ></div>
</modal-dialog>

自定义指令有一个模板，没什么特别的，一些基本的html，一切正常。我只有一个问题。

问题

额外的取消按钮（除了右上角的X之外）不会触发show =＆＃39; modalShown＆＃39;父母的。

所以基本上，我的取消按钮正确触发了指令中的scope.hideModal函数并调整了scope.show，但调整后的值并没有传递给父节目的显示，或者至少没有＆＃ 39; t在模态对话框逻辑中触发手表：

      scope.$watch('show', function(newVal, oldVal) {
        if (newVal && !oldVal) {
          document.getElementsByTagName("body")[0].style.overflow = "hidden";
        } else {
          document.getElementsByTagName("body")[0].style.overflow = "";
        }
        if ((!newVal && oldVal) && (scope.onClose != null)) {
          return scope.onClose();
        }
      });

问题

如何使上述情况有效？

将具有隔离范围的子指令中的值传递给也具有隔离范围的父指令需要什么？

Answer 1

此fiddle会重现您的问题。

问题

modalDialog指令创建自己的范围，因此HTML中的2 modalShown个变量不是同一个变量。它们是独立的，这就是为什么改变内部的不会改变外层的。

解决方案

要使它们成为相同的变量，请将它们作为公共对象的属性。

<modal-dialog show='modal.shown' width='500px' class="sf-dialog">
    <div sf-ng-branch-finder branch-finder-title="Find your branch" show='modal.shown' ></div>
</modal-dialog>

在您的控制器中，您应该$scope.modal = {shown: true}

请参阅此更新的fiddle。这是在Angular中使用$scope的推荐方法。您应该在视图中的变量名中有一个点。

更好

为了帮助您使用这种技术，Angular团队在Angular 1.2中添加了一个名为“Controller As”语法的新功能，而不是操纵控制器中的作用域，控制器操纵自己在作用域中发布的对象

<div ng-controller="ModalController as modal">
    <modal-dialog show='modal.shown' width='500px' class="sf-dialog">
        <div sf-ng-branch-finder branch-finder-title="Find your branch" show='modal.shown' ></div>
    </modal-dialog>

在控制器中：

.controller('ModalController', function () {
    this.shown = true;
});

查看此更新的fiddle。 'Controller As'是简化范围管理的方法。

将子指令隔离范围的值传递给父指令隔离范围并触发父级的监视

1 个答案: