0

我的html：

<div ng-app="myApp">
    <div ng-controller="testCtrl">
        <div in-tags text="{{ tags }}"></div>
        <div data-ng-show="tags.length" in-tags text="{{ tags }}"></div>
        <p data-ng-show="tags.length">another text</p>
    </div>
</div>

和js：

.controller('testCtrl', function($scope){
        $scope.tags = 'one two three';
    })
    .directive( 'inTags',function() {
        return {
            scope: {
                text: '@'
            },
            template: '<span ng-repeat="item in text | splitByWords"> {{ item }} </span>'
        };
    })
    .filter( 'splitByWords', function() {
        return function( text ) {
            return text.split( /\s+/ );
        };
    });

它是如何工作的：http: //jsfiddle.net/3HT2F/12/

问题是：为什么 tags.length 用指令解释为false？

额外问题：如何隐藏 div？

4

1 回答 1

1

对于您的主要问题，scope您的指令 ( inTags) 上的属性设置了一个新的隔离范围，其中只有一个成员（连接的text属性）。它是具有嵌套作用域和孤立作用域的 Angular 的绊脚石之一。当您为范围设置文字对象并指定映射时（例如在这种情况下使用 '@' 绑定 dom 属性），它会创建一个隔离范围，该范围不会从其父级继承任何其他值。所以tags不再是该元素的本地范围的成员。

请参阅指令的范围规则

第二个问题，为什么不ngShow工作ngHide？如果您使用的是足够新的 Angular (1.2+)，您还可以使用ngIf来完成删除元素而不是隐藏它们。

编辑：这是你的小提琴更新

于 2013-10-11T09:35:11.507 回答