如何使用角度表達式值作爲html元素的屬性

Question

我有一個場景，我需要在運行時（按鈕單擊）將不同的指令（屬性）應用於Angular Bootstrap Modal中的DIV。

我會知道要應用的指令的名稱。但我無法弄清楚如何在運行時更改模板以將必要的指令名稱作爲屬性添加到DIV。

考慮這個plunker

基本上我想股利有小孩指令，因爲使用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"); 
     } 
     } 
    }; 
    });;