Question

我的html中有以下行：

<div ng-bind-html-unsafe="departmentConfig" class="control-group"></div>

我使用$resource获取来检索HTML，将HTML分配给$scope.departmentConfig，然后视图会完美更新。分配给$scope.departmentConfig的HTML包含表单元素，其中包含ng-model个属性，但是当我更改这些输入元素中的值时，它们根本不会更新$scope模型。

这是我尝试过的，基于很多其他互联网帖子，它不起作用：

$resource('resources/sources/departments/:mappedName', {
        mappedName:departmentKey
    }).get(function(departmentConfig) {
        // This will call another function that will build a chunk of HTML
        $scope.departmentConfig = $scope.buildDepartmentConfigHtml(departmentConfig);
        // This is my feeble attempt to access the element, and bootstrap it to include the items in the $scope model.
        var $departmentConfigContainer = $('#departmentConfig');
        angular.bootstrap($departmentConfigContainer, ['sourcemanager']);

我甚至看到过一些jsFiddle示例，其中似乎有效，但我的不是。我过早地打电话给bootstrap吗？我还尝试在$watch上加$scope.departmentConfig这样：

$scope.$watch('departmentConfig', function() {
    var $departmentConfigContainer = $('#departmentConfig');
    angular.bootstrap($departmentConfigContainer);
});

但它也没有用。我打赌这有一个简单的解释，我似乎无法获得在页面编译后加载的ng-model的输入元素以绑定到模型。任何帮助表示赞赏，这是我在页面上工作所需的最后一项功能。如果您还需要有关我的配置的更多信息，请与我们联系。

所以，简单地说，在我知道它已被加载后，如何强制DOM的一部分重新编译？

更新

这是一个jsfiddle，概述了我想做的事情：http://jsfiddle.net/j_snyder/ctyfg/。您会注意到属性二和三不更新模型，我在外部div上调用bootstrap，希望包含模型绑定中的那些。这是我第一次发布到jsfiddle，如果你看不到这个例子，请告诉我。

Answer 1

ng-bind-html是针对常规HTML而制作的，而不是编译新的角度元素。

您将使用$compile service。

以下是编辑当前示例的方法：http://jsfiddle.net/andytjoslin/ctyfg/21/。但这种方式最终会变坏，因为你必须在你的控制器中进行DOM操作。

您只需要创建一个基本上可以执行ng-bind-html操作的指令：http://jsfiddle.net/andytjoslin/ctyfg/22/

AngularJS - ng-bind-html-unsafe和ng-model问题

1 个答案: