Question

我无法弄明白这一点......我很有新意思，如果我做了些蠢事，那就很抱歉。

我想使用ng-show随机显示指令的部分内容。

HTML：

<div ng-controller="MyCtrl">
    <div ng-repeat="color in colors">
        <my-directive color="color"></my-directive>
    </div>
</div>

控制器：

function MyCtrl($scope) {
    $scope.colors = [
        {color: "red", stuff: "1"},
        {color: "blue", stuff: "2"},
        {color: "yellow", stuff: "3"}
    ];
}

指令：

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        scope: {
            color: '=',
            showText: '@'
        },
        template: 'test <p ng-show="showText">{{color.color}} {{color.stuff}}</p>',
        controller: function ($scope, $element) {
            $scope.showText = Math.random() < 0.5;
        }
    }
});

<p>...</p>从未显示，为什么？

http://jsfiddle.net/oxr4c9ub/2/

Answer 1

这是因为你在范围属性@上有一个（showText）文本绑定。当指令呈现它时，它会评估控制器并在隔离的作用域对象上设置属性值，但之后它会评估文本绑定并覆盖作用域属性showText，即使没有绑定到它的值也是如此。所以基本上你设置的随机布尔值被@绑定属性（undefined / null）覆盖，这是假的，总是会隐藏p标签。

如果您不需要，可以从指令设置中删除showText: '@'，或者可以使用$timeout将属性值的设置推迟到下一个摘要周期。

<强> Fiddle

指令中的随机ng-show

1 个答案: