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

Question

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

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

考虑一下plunker

基本上我希望 div 使用这样的语法将子指令作为属性 <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");
        }
      }
    };
  });;