Question

我想动态设置子指令的属性。
但是我做不到。

在示例中，我想将属性ara_deger_price设置为值name。

UPD：在这种情况下，我无法确定确切的属性集。我需要动态定义它们。例如，这是第三方库的一部分。

John

angular.module('app', []);

angular.module('app')
  .directive('wrapper', wrapper);

angular.module('app')
  .directive('inWrapper', inWrapper);

angular.bootstrap(
  document.getElementById('root'), ['app']
);

function wrapper() {
  return {
    transclude: true,
    template: '<div ng-transclude></div>',
    link: function linkFn(scope, element, attrs, ctrl,  transcludeFn) {
      transcludeFn(
        scope,
        function(clone) {
          clone.find('in-wrapper').attr('name', 'John');
        }
      );
    }
  }
}

function inWrapper() {
  return {
    scope: {
      name: '@'
    },
    template: 'Hello, {{name}}',
    link: function linkFunc(scope) {
      if (!scope.name) {
        scope.name = 'Empty';
      }
    }
  }
}

Answer 1

我尝试动态设置属性，但失败了。
我建议直接在项目区域中为属性提供数据。
在代码示例中，我修改了transclude函数中的元素。并为控制器中的属性元素提供了数据。代码不理想。仅用于演示。

P.S。感谢@CodeMonkey批评最初的想法

angular.module("app", []);

angular.module("app").directive("wrapper", wrapper);

angular.module("app").directive("inWrapper", inWrapper);

angular.bootstrap(document.getElementById("root"), ["app"]);

function wrapper() {
  return {
    restrict: "E",
    transclude: true,
    controller: function linkFn($scope, $element, $attrs, $transclude) {
      var transcludedContent, transclusionScope,
        statuses = [
          'danger',
          'success',
          'info'
        ];
      status = 0;
      $transclude(function(clone, scope) {
        $element.append(clone);
        transcludedContent = clone;
        transclusionScope = scope;
        for (var i = 0, ii = clone.length; i < ii; i++) {
          var node = clone[i];
          if (node.nodeType !== 3 ||
            node.nodeValue.trim()) {
            node.classList.add(statuses[status]);
            status++;
          }
        }
      });
      // find scope for angulars element and provide data
      var elements = $element.find("in-wrapper");
      for (var i = 0, ii = elements.length; i < ii; i++) {
        var isolateScope = angular.element(elements[i]).isolateScope();
        isolateScope.name = 'World' + isolateScope.$id;

      }

    }
  };
}

function inWrapper() {
  return {
    scope: {
      name: "@"
    },
    template: '<div>Hello, <span ng-bind="name"></span></div>'
  };
}

.danger {
  color: #ff0000;
}

.success {
  color: #00ff00;
}

.info {
  color: #0000ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">
  <wrapper>
    <in-wrapper></in-wrapper>
    <in-wrapper></in-wrapper>
    <in-wrapper></in-wrapper>
  </wrapper>
</div>

Answer 2

您应该能够将属性链接到范围变量。如果您在谈论自己设计指令，则可以将控制器的范围变量定义为“ =”，它们将双向链接到传递给属性的值。查看AngularJS: Developer Guide了解更多信息。

您也许还可以使用{{...}}注释来分配属性的值，以将范围变量直接注入到标记中。

在Angularjs中动态设置子指令的属性

2 个答案: