我有一个用于添加渐变背景颜色的指令,有点像这样:
.directive('colouredTile', function () {
return {
restrict: 'A',
controller: 'ColouredTileController',
scope: {
colour: '@colouredTile',
colouredIf: '='
},
link: function (scope, element, attr, controller) {
console.log(scope.colouredIf);
// Get the CSS to apply to the element
var css = controller.generateCSS(scope.colour);
// Apply the CSS to the element
element.attr('style', css);
}
};
})
我目前正在尝试为其添加 ng-if 类型函数,因此我添加了一个名为 colored-if 的属性。我希望它只在 colored-if 属性被评估为true时应用颜色。 我知道我必须加一块手表,但我还没有那么远。 到目前为止,我认为这是:
<form name="orderHeader" novalidate coloured-tile="D83030" coloured-if="orderHeader.$invalid" ng-class="{ 'test': orderHeader.$invalid }">
<div class="form-group" ng-class="{ 'has-error' : !orderHeader.source.$pristine && orderHeader.source.$invalid || !orderHeader.source }">
<label class="control-label">Source</label>
<select class="form-control" name="source" ng-disabled="controller.order.orderNumber" ng-model="controller.order.source" ng-options="source.id as source.name for source in controller.sources" required></select>
</div>
<div class="form-group" ng-class="{ 'has-error' : !orderHeader.reason.$pristine && orderHeader.reason.$invalid || !orderHeader.reason }">
<label class="control-label">Reason for adding additional order</label>
<select class="form-control" name="reason" ng-disabled="controller.order.orderNumber" ng-model="controller.order.reason" required>
<option>Manual</option>
<option>Sample</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : !orderHeader.accountNumber.$pristine && orderHeader.accountNumber.$invalid || !orderHeader.accountNumber }">
<label class="control-label">Account number</label>
<input class="form-control" type="text" name="accountNumber" ng-disabled="controller.order.orderNumber" ng-model="controller.order.accountNumber" typeahead="account.accountNumber as account for account in controller.autoComplete($viewValue)" typeahead-template-url="template/typeahead/typeahead-account-match.html" autocomplete="off" />
</div>
<div class="form-group" ng-class="{ 'has-error' : !orderHeader.referenceNumber.$pristine && orderHeader.referenceNumber.$invalid || !orderHeader.referenceNumber }">
<label class="control-label">Customer reference number</label>
<input class="form-control" type="text" name="referenceNumber" ng-disabled="controller.order.orderNumber" ng-model="controller.order.referenceNumber" required />
</div>
<div class="form-group">
<button class="btn btn-danger" type="button" ng-click="controller.back()">Cancel</button>
<a class="btn btn-primary pull-right" ng-disabled="orderHeader.$invalid" ui-sref=".lines">Continue</a>
</div>
</form>
正如您所看到的,我在表单上有彩色图块,而 colored-if 属性正在评估表单的 $ invalid 国家。 如果表单无效,我希望它应用颜色。
问题是,目前,在我的指令中,我在控制台中注销 scope.colourIf ,它返回“undefined”,这是奇怪的。作为测试,我在表单中添加了 ng-class 指令,以查看表单是否可以访问 $ invalid 属性,我可以确认它。
那么,有没有人知道我为什么在我的指令中得到“未定义”而不是“真实”?
答案 0 :(得分:0)
解析DOM时执行 Use FrameLayout instead of RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image_display"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:contentDescription="@string/txt_image_slider" />
</FrameLayout>
函数,但在使用应用程序期间,指令link
的值可能会发生变化。因此,您需要colouredIf
对此变量进行更改:
$watch