根据状态动态添加/删除属性指令

时间:2015-08-25 22:42:40

标签: javascript angularjs angularjs-directive

我想建立一个基于布尔标志添加和删除第二个指令的指令。

因此,当boolFlag = true时,example.html中的div应重新编译以包含my-dir作为属性。并且它应该具有my-dir以“test = 1”形式所需的其他属性。

以下是我到目前为止的基本知识:

example.html ----

<div add-remove when={{boolFlag}} dir-name="my-dir" dir-attrs="test, 1"></div>

add-remove-directive.js ----

function($compile, $timeout) {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
    var attrArray = attrs.dirAttrs.split(',');
    for (a in attrArray) {
      attrArray[a] = attrArray[a].trim();
    }
    attrs.$observe('when', function() {
    // flagged when the directive should be attached to the element
      var isWhen = attrs.when === 'true';
      if (isWhen) {
       for (a = 0; a < attrArray.length; a+=2) {
         elem.attr(attrArray[a], attrArray[a+1]);
       }
       newScope = scope.$new();
       cElem = $compile(elem)(newScope);
       elem.replaceWith(cElem);
       $timeout(function() {
         scope.$destroy();
       });
    }
    // if the flag is not set, remove the dynamic directive from the element
    // but only if the element already has the given directive
    else {
        normDirName = attrs.$normalize(attrs.dirName);
        console.log(normDirName);
        console.log(r, 'elsed', attrs);
        if (!attrs.hasOwnProperty(normDirName)) return;

        elem.removeAttr(scope.dirName);
        for (a = 0; a < attrArray.length; a+=2) {
          elem.removeAttr(attrArray[a]);
        }
        newScope = scope.$new();
        cElem = $compile(elem)(newScope);
        elem.replaceWith(cElem);
        $timeout(function() {
          scope.$destroy();
        });
      }
  }

}

--- --- EDIT

抱歉,我从项目中复制它是一个错误。它的功能取决于我在原帖中的描述。

基本上现在的情况是我可以使用相应的必需属性“test = 1”正确地动态“my-dir”指令。

但我遇到的问题是:

  • 有两个范围是原始的,没有“my-dir”,另一个范围是“my-dir”。

  • 当boolFlag设置为false时,我的else语句无法从div中正确删除“my-dir”。

0 个答案:

没有答案