Question

HTML：

<body ng-controller="TestController as _tc">
    <h4>Controllers value:</h4>

    <p>{{_tc.value}}</p>

    <button ng-click="_tc.addInput()">Add Directive Value</button>

    <test-directive></test-directive>
</body>

JS：

var app = angular.module('plunker', []);


var testController = function( testService ) {

  this.value = 'Test Value!';

  this.content = '';

  this.addInput = function() {

    testService.add('<input placeholder="Enter value" ng-model="_tc.value" />');

  }

};

var testService = function( $sce ) {

  this.content = '';

  this.add = function( content ) {

    this.content = $sce.trustAsHtml( content );

  }

};

var testDirective = function( testService ) {

  return {

    template:'<h4 ng-if="data.content !== \'\'">If you enter value below it should be bound to the controllers value above because scope is shared but value is not binding</h4><div ng-bind-html="data.content"></div>',
    link: function( $scope ) {

      $scope.data = testService;


    }

  }

};

testService.$inject = ['$sce'];
app.service( 'testService', testService );

testController.$inject = ['testService'];
app.controller('TestController', testController );

testDirective.$inject = ['testService'];
app.directive( 'testDirective', testDirective );

Plunkr： http://plnkr.co/edit/rqnFjtYZ0s4wdOlBpEV1?p=preview

问题：添加指令内容时，数据绑定在指令中不起作用。

我知道动态添加的内容只是文本，不能绑定任何值，但我不知道如何正确编译它以使其按预期工作。

任何帮助都将非常感激

Answer 1

我终于想出了如何做到这一点。有很多关于$ compile的教程和关于$ compile的很多答案，但是所有这些都是非常具体的案例，不需要灵活性或很多麻烦来处理不同的情况。

简单且非常灵活的方法是在动态内容的指令中使用指令，必须按照此plunkr中所示进行编译： http://plnkr.co/edit/5QTVKoAyDMJORNeopVib?p=preview

这样你就可以编译整个指令而无需选择元素和其他一些疯狂不灵活的人员：

var contentDirective = function( testService,$compile,$timeout ) {

  return {

    scope: {

      data:'='

    },
    link: function( $scope,$element ) {

      $element.html( $scope.data );

      $compile( $element.contents() )( $scope.$parent );

    }

  }

};

在plunkr中，内容指令中只有$ timeout用于演示目的，通常在数据加载某些操作时不需要，而不是像示例中那样立即加载。

AngularJS动态指令内容

1 个答案: