隐藏布尔属性指令的一部分

Question

我有一个显示 <md-card> 的指令，但我想通过仅在指令的属性 isUser 为 true.

然而，目录似乎没有从我在页面上使用它的地方获取属性...如果我在 {{ isUser }} 上使用 ng-hide，它会显示，无论我向它发送什么样的数据。如果我使用 ng-show 它永远不会显示：

<md-card md-colors="::{backgroundColor: '{{theme}}-primary-900'}">
    <md-card-title>
        <md-card-title-media ng-show="{{isUser}}">
            <div class="md-media-sm card-media" layout md-colors="::{background: '{{theme}}-accent-700'}">
                <md-icon md-svg-icon="resources/img/profile_white_48.svg"></md-icon>
            </div>
        </md-card-title-media>
        <md-card-title-text>
            <span class="md-headline">{{name}}</span>
            <span class="md-subhead description"><span class="lead orange">Sentinel Number: {{ ptsnumber }}</span></span>
        </md-card-title-text>
    </md-card-title>
</md-card>

指令：

angular.module("card", [])
        .directive("card", function () {
            return {
                restrict: 'E',
                templateUrl: 'app/shared/CARD.TMPL.HTML',
                scope: {
                    name: '@',
                    theme: '@',
                    ptsnumber: '@',
                    isUser: '@'
                },
                controller: function ($scope) {
                    $scope.theme = $scope.theme || 'default';
                }
            }
        })

用法：

<card ng-repeat="person in vm.persons | unique: 'PTSNumber'" 
                   name="{{person.Firstname}} {{person.Surname}}" theme="user" 
                   ptsnumber="{{ person.PTSNumber }}"
                   isUser="{{ true }}"
                   ng-click="vm.setUser(person.PTSNumber, person.Firstname, person.Surname, $event)"></card>

Answer 1

所以，我不知道你用的是哪个 angular 版本，你的 post 中也没有提到这个，但是所有这些参数最好定义为 [=12] =]. 这允许您传递 angular 表达式。

然后删除所有插值，你不需要它们。

<card ng-repeat="person in vm.persons | unique: 'PTSNumber'" 
                   name="person.Firstname + ' ' + person.Surname" theme="user" 
                   ptsnumber="person.PTSNumber"
                   is-user="true"
                   ng-click="vm.setUser(person.PTSNumber, person.Firstname, person.Surname, $event)"></card>

然后在你的 HTML 你有一个问题：

isUser应该是is-user（上面代码已经改了）

并且在你的 ng-show 中也删除插值：

ng-show="isUser"

所有这些应该可以解决您的问题。

希望对您有所帮助

隐藏布尔属性指令的一部分

Hide part of directive on boolean attribute

javascript

angularjs

angularjs-directive

angularjs-scope