如何使用指令设置其他指令？

I have an object on the scope of a controller that contains some presentation data for an input:

我在控制器的范围上有一个对象,它包含一些输入的表示数据:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.settings = {
    value: 'xxx',
    required: true,
    show: true,
    readonly: false
  };
});

In the actual application, this is part of a larger object loaded from the server. I created a directive that would take this presentation object as input and attach the necessary directives:

在实际应用程序中,这是从服务器加载的较大对象的一部分。我创建了一个指令,它将此表示对象作为输入并附加必要的指令:

app.directive('fieldSettings',
  [/*$injectables*/
  function (/*$injectables*/) {
    return {
      priority: 100,
      restrict: 'A',
      scope: {
        fieldSettings: '='
      },
      compile: function (el, attrs) {
        return function (scope, iElement, iAttrs) {
          iAttrs.$set('ng-model', 'fieldSettings.value');
          iAttrs.$set('ng-show', 'fieldSettings.show');
          iAttrs.$set('ng-required', 'fieldSettings.required');
          iAttrs.$set('ng-readonly', 'fieldSettings.readonly');
        }
      }
    };
  }
]);

As this plunk demonstrates, the attributes are added but the logic is not being applied. According to the documentation for angular, the directives I am trying to apply have a priority of 0 and the input directive has a priority of 100. I set mine to 100 but this value seems to have no affect regardless of the value I choose for it.

正如此插件所示,添加了属性但未应用逻辑。根据angular的文档,我试图应用的指令优先级为0,输入指令的优先级为100.我将我的设置为100,但无论我为它选择的值,这个值似乎没有任何影响。

I want

<input field-settings="settings" />

to behave like

表现得像

<input ng-model="settings.value" ng-show="settings.show" ng-required="settings.required" ng-readonly="settings.readonly" />

but literally be

但字面意思是

<input ng-model="fieldSettings.value" ng-show="fieldSettings.show" ng-required="fieldSettings.required" ng-readonly="fieldSettings.readonly" />

where fieldSettings is the directive's local scope variable bound to the MaintCtrl's local scope variable settings.

其中fieldSettings是指令的局部范围变量,绑定到MaintCtrl的局部范围变量设置。

1 个解决方案

#1

Just adding the attributes without compiling won't do anything.

只是添加属性而不编译将不会做任何事情。

My similar answeres:

我的回答类似:

• creating a new directive with angularjs

使用angularjs创建一个新指令

• How to get ng-class with $dirty working in a directive?

如何使用$ dirty在指令中使用ng-class?

• Angular directive how to add an attribute to the element?

Angular指令如何向元素添加属性?

Here is a plunker: http://plnkr.co/edit/8kno6iwp3hH5CJFQt3ql?p=preview

这是一个plunker:http://plnkr.co/edit/8kno6iwp3hH5CJFQt3ql?p=preview

Working directive:

app.directive('fieldSettings',
  ['$compile',
  function ($compile) {
    return {
      restrict: 'A',
      scope: {
        fieldSettings: '='
      },
      priority: 1001,
      terminal: true,
      compile: function(tElm,tAttrs){
        tElm.removeAttr('field-settings')
        tElm.attr('ng-model', 'fieldSettings.value');
        tElm.attr('ng-show', 'fieldSettings.show');
        tElm.attr('ng-required', 'fieldSettings.required');
        tElm.attr('ng-readonly', 'fieldSettings.readonly');
        var fn = $compile(tElm);
        return function(scope){
          fn(scope);
        }
      }
    };
  }