无法将angularjs范围用于指令

时间:2015-12-30 10:25:02

标签: angularjs angularjs-directive

我正在使用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}}

0 个答案:

没有答案