隐藏布尔属性的指令部分

时间:2017-05-25 12:30:15

标签: javascript angularjs angularjs-directive angularjs-scope

我有一个显示<md-card>的指令,但我想通过只显示指令的属性{{1来显示部分(图标),使其在整个应用程序中更具可重用性是} isUser

然而,似乎目录没有从我在我的页面上使用它的位置获取属性...如果我在true上使用ng-hide它会显示,无论是我发送给它的数据类型。如果我使用{{ isUser }},它永远不会显示:

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';
                }
            }
        })

1 个答案:

答案 0 :(得分:1)

所以,我不知道您使用的是哪个角度版本,这在您的帖子中没有提及,但所有这些参数最好定义为<。 这允许您传递角度表达式。

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

<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"

所有这一切都应该解决你的问题。

我希望这会有所帮助