如何使用 angular 表达式值作为 html 元素的属性

Question

我有一个场景，我需要在运行时（单击按钮）将不同的指令（属性）应用于 Angular bootstrap 模态中的 DIV。

我会知道要应用的指令的名称。但是我无法弄清楚如何在运行时更改模板以将必要的指令名称作为属性添加到 DIV。

考虑这个 plunker

基本上我希望 div 使用像这样的 synstax 将子指令作为属性 <div {{child}}></div>

所以当它工作时，它应该生成<div child-directive></div>

如何做到这一点？这甚至可能吗？在打开 Modal 之前更改模板以使其在加载时正确连接的最佳方法是什么。

Answer 1

// Code goes here

var app = angular.module('main-module', ['ui.bootstrap']);

app.directive('parentDirective', function($uibModal, $compile) {
    return {
      restrict: 'E',
      template: "<h2>I am Parent</h2><button ng-click='click()'>Click Me</button>",
      scope: {
        child:'@'
      },
      link: function($scope, elem, attrs) {
        console.log('?',$scope.child, $scope);

        var template = "<div><h3>This is modal</h3>" 
              + "Ideally you should see the child directive below"
              + "<hr />"
              + "<div "+ $scope.child + "></div></div>"; 

        $scope.click = function() {
          $uibModal.open({
            template: template,
            scope: $scope,
            size: 'lg',
          });
        }
      }
    };
  })
  .directive('childDirective', function() {
    return {
      restrict: 'A',
      template: "<div><h4>I am Child</h4><a ng-click='click()'>Click Me!!</a></div>",
      replace: true,
      scope: {},
      link: function($scope, elem, attrs) {
        $scope.click = function() {
          alert("I am in child scope");
        }
      }
    };
  }).directive('anotherChildDirective', function() {
    return {
      restrict: 'A',
      template: "<div><h4>I am another Child</h4><a ng-click='click()'>Click Me!!</a></div>",
      replace: true,
      scope: {},
      link: function($scope, elem, attrs) {
        $scope.click = function() {
          alert("I am in child scope");
        }
      }
    };
  });;

如何使用 angular 表达式值作为 html 元素的属性

how to use angular expression value as an attribute for html element

javascript

angularjs

angularjs-directive

angularjs-scope

angular-ui-bootstrap