Question

我想创建一个包含页面一部分并隐藏它的指令。我想使用ng-if删除不必要的绑定。但是一些黑魔法发生了。

这是我最喜欢的指令代码。

app.directive('withIf', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template: '<div>' +
        '<p ng-click="visible = !visible">{{title}}</p>' +
        '<div ng-if="visible" ng-transclude></div>'+
        '</div>',
        link: function(scope){
            scope.visible = false;
        }
    }
});

应该创建两个范围：

指令隔离范围有两个变量 - 标题和可见
原型继承自“常规”范围树的转换范围。

然而，ng-if使得被转移的范围与现实有些脱节，并且trasncluded范围不会从控制器继承。请看小提琴，它非常清楚地说明了问题。

任何想法在那里发生了什么以及如何解决它？

更新

似乎我已经找到了范围链看起来破碎的原因。由ng-if创建的范围属于withIf指令isolate分支。所以它永远不知道控制器的范围是否存在。但问题仍然是相同的 - 如何在这种情况下使用ng-if。

Answer 1

ng-if创建子范围，使用$parent从父范围访问变量。但在你的情况下，我会考虑使用ng-show或ng-hide而不是ng-if（它们不创建子范围）

Answer 2

此错误似乎已在Angular 1.3中修复 - https://github.com/angular/angular.js/pull/7499

在transcluded范围内的ng-if会破坏范围继承

2 个答案: