Question

我从控制器注入html输入，我试图绑定范围变量，但它不起作用。

这是我的代码
HTML：

    <div ng-controller='addHTML'>
       <div ng-bind-html="trustedHtml"></div>
       <code>{{user}}</code>
    </div>

CSS：

var app = angular.module('app',[]);
var addHTML = function ($scope,$sce) {
     $scope.user = {};
     $scope.user.someVariable = "";

    //inject some html
    $scope.html = '<input type="text" ng-model="user.someVariable">';
    $scope.trustedHtml = $sce.trustAsHtml($scope.html);

};

你可以在这里找到它：http://jsbin.com/miluguni/1/watch?html,js,output
输入输入时，范围变量不会更改。

Answer 1

ngBindHtml指令不是$ compile模板，它只将模板插入DOM。

我复制了ngBindHtml（source code）并向其添加了$ compile

新指令：

app.directive('compileHtml',['$sce', '$parse', '$compile', 
  function($sce, $parse, $compile){
  return {
    link: function(scope,element,attr){
      var parsed = $parse(attr.compileHtml);
      function getStringValue() { return (parsed(scope) || '').toString(); }            
      scope.$watch(getStringValue, function (value) {
        var el = $compile($sce.getTrustedHtml(parsed(scope)) || '')(scope);
        element.empty();
        element.append(el);        
      });       
    } 
  };
}]);

<强>模板：

<div compile-html="trustedHtml"></div>

如何将控制器绑定到动态添加的HTML？

1 个答案:

以下是演示：http://jsbin.com/miluguni/3/edit