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

原因是，在模板中附加的指令在父元素上需要其他指令时，在编译“离线”时将无法找到它们。