隐藏布尔属性指令的一部分
Hide part of directive on boolean attribute
我有一个显示 <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>
所以,我不知道你用的是哪个 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"
所有这些应该可以解决您的问题。
希望对您有所帮助
我有一个显示 <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>
所以,我不知道你用的是哪个 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"
所有这些应该可以解决您的问题。
希望对您有所帮助