AngularJS綁定$ scope變量

Question

我嘗試在angularJS中構建此指令，並且遇到這個問題，嘗試將其綁定到HTML，對象屬性，該對象的名稱來自另一個變量，如下面的示例

angular.module('ng.box', codeHive.angular.modules)
.directive('boxView', function($compile) {
return {
    link: function(scope, element, attrs, ngModelCtrl) {
       var name = 'exampl';
        var htmlTemplate = '<div instance="'+scope[name].innerVal +'"  </div> ';

        var el = angular.element('<div/>');
        el.append(htmlTemplate);
        $compile(el)(scope);
        element.append(el);
    },
  };
})

我試圖弄清楚如何將此對象屬性綁定到HTML元素中的instance屬性

 var htmlTemplate = '<div instance="'+scope[name].innerVal +'"  </div> ';

任何幫助請

Answer 1

很簡單：

var htmlTemplate = '<div instance="' + name + '.innerVal"  </div> ';

PS。 順便說一句，這些行應該交換：

    element.append(el); // this should be first line
    $compile(el)(scope); // this should be second line

原因是，在模板中附加的指令在父元素上需要其他指令時，在編譯“離線”時將無法找到它們。