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 元素中的实例属性

 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

原因是被追加的模板中需要父元素上的其他指令的指令在编译时将无法找到它们 "offline"。

AngularJS 绑定 $scope 变量

AngularJS Bind $scope variable

javascript

angularjs

angularjs-directive

angularjs-scope