我正在使用angular创建一个指令来检查当前平台,并根据当前平台将指令元素打印为不同的输入元素。
我的指令目前看起来像这样:
<my-text-input template-name="{{currentPlatform}}" placeholder="name" highlight="calm" type="text" class="myClass"></my-text-input>
正如您所看到的,我正在添加占位符,类,类型和高亮显示作为参数。
这是我的指示:
angular.module('myapp.platformSpecific', [])
.directive('myTextInput', ['$compile', function ($compile) {
return {
restrict: 'E',
replace: true,
scope: {
class: '=',
placeholder: '=',
type: '=',
highlight: '='
},
link: function (scope, element, attrs, ngModelCtrl) {
console.log(scope);
console.log(attrs);
var template = {
'android': '<ion-md-input placeholder="{{attrs.placeholder}}" highlight-color="{{attrs.highlight}}" class="{{class}}" type="{{type}}"></ion-md-input>',
'ios': '<div>This is template for ios</div>',
'default': '<div>This is template for default</div>'
};
var templateObj;
if (attrs.templateName === 'ios') {
templateObj = $compile(template['ios'])(scope);
} else if (attrs.templateName === 'android') {
templateObj = $compile(template['android'])(scope);
}
else {
templateObj = $compile(template['default'])(scope);
}
element.append(templateObj);
}
};
}])
我也在控制台(范围)和(attrs)打印出来。
作为我的参数的范围接缝未定义,而attrs作为所有参数的正确值。
这是我到目前为止尝试添加到我的模板中的内容:
placeholder="{{scope.placeholder}}"
placeholder="scope.placeholder"
placeholder="{{placeholder}}"
placeholder="{{attrs.placeholder}}"
但它们都不起作用。我该如何解决这个问题?
非常感谢你的帮助
解
感谢@Avijit Gupta指出这一点
我使用双向绑定绑定了值。我解决了这个改变我的范围
从:
scope: {
class: '=',
placeholder: '=',
type: '=',
highlight: '='
},
为:
scope: {
class: '@class',
placeholder: '@placeholder',
type: '@type',
highlight: '@highlight'
},
在模板中我正在使用它们:
placeholder="{{placeholder}}" highlight-color="{{highlight}}" class="{{class}}" type="{{type}}