指令中的角度应用类 [英] Angular apply class in directive

问题描述

我有一个 angular 指令，它将生成引导程序表单组，查找 $scope.errors 以获取指令的 ng-model 值以显示错误.. 示例如下:我的 html 代码:

和我的指令代码:

app.directive('bInput', function ($compile) {返回 {限制:'EA'，替换:真的，链接:函数(范围、元素、属性){var div = $('
', {'class': 'form-group','ng-class':'有错误':错误."+ attrs.ngModel + " != null "});$编译(div)(范围)；element.wrap(div);如果(属性.标签！=未定义){element.before('<label for="' + attrs.name + '" class="control-label">' + attrs.label + '</label>');element.removeAttr('label');}}};});

你能解释一下我如何达到预期的结果吗?

解决方案

修改指令的 compile fn 内的元素，因为在 DOM 上是简单的.然后在从编译函数返回的链接函数中重新编译该元素.

代码

app.directive('bInput', function($compile) {返回 {限制:'EA'，替换:真的，编译:函数(元素，属性){var div = $('
', {'class': '表单控件','ng-class':'有错误':错误."+ attrs.ngModel + " != null "});element.wrap(div);如果(属性.标签！=未定义){element.before('<label for="' + attrs.name + '" class="control-label">' + attrs.label + '</label>');element.removeAttr('label');}element.removeAttr('b-input');返回函数(范围，元素，属性){var linkFn = $compile(element);链接Fn(范围)}};});

看看类似的这里的答案

I have a angular directive which will produce bootstrap form-group, looks for $scope.errors for value of ng-model of the directive to show errors.. Example below: My html code:

<input type="text" b-input ng-model="data.company.name" label="Company Name" class="form-control"/>

and my directive code:

app.directive('bInput', function ($compile) {
    return {
        restrict: 'EA',
        replace: true,
        link: function (scope, element, attrs) {
            var div = $('<div>', {
                'class': 'form-group',
                'ng-class': " 'has-error' : errors." + attrs.ngModel + " != null "
            });

            $compile(div)(scope);
            element.wrap(div);
            if (attrs.label != undefined) {
                element.before('<label for="' + attrs.name + '" class="control-label">' + attrs.label + '</label>');
                element.removeAttr('label');
            }
        }
    };
});

Can you please explain me how do i achieve the desired result?

解决方案

Modify element inside the compile fn of the directive because at DOM is plain. and then recompile that element inside the link function which is return from compile function.

Code

app.directive('bInput', function($compile) {
  return {
    restrict: 'EA',
    replace: true,
    compile: function(element, attrs) {
      var div = $('<div>', {
        'class': 'form-control',
        'ng-class': " 'has-error' : errors." + attrs.ngModel + " != null "
      });
      element.wrap(div);
      if (attrs.label != undefined) {
        element.before('<label for="' + attrs.name + '" class="control-label">' + attrs.label + '</label>');
        element.removeAttr('label');
      }
      element.removeAttr('b-input');
      return function(scope, element, attrs) {
        var linkFn = $compile(element);
        linkFn(scope)
      }
    };
  });

Look at similar SO answer here

这篇关于指令中的角度应用类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！