8

我的 html 中有以下行：

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

我使用$resourceget 检索 HTML，将 HTML 分配给$scope.departmentConfig，然后视图完美更新。分配给的 HTML$scope.departmentConfig包含表单元素，其中包含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 示例，这些示例似乎可以正常工作，但我的却不行。我是否过早调用引导程序？我也试过这样$watch穿$scope.departmentConfig：

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

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

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

更新

这是一个 jsfiddle，概述了我想做的事情：http: //jsfiddle.net/j_snyder/ctyfg/。您会注意到属性 2 和 3 不会更新模型，并且我在外部 div 上调用引导程序，希望这将包括模型绑定中的那些。这是我第一次发布到 jsfiddle，如果您看不到示例，请告诉我。

4

1 回答 1

13

ng-bind-html 是为常规 HTML 制作的，而不是编译新的 angular 元素。

您将使用$compile 服务。

以下是您将如何编辑当前示例以使其工作：http: //jsfiddle.net/andytjoslin/ctyfg/21/。但这种方式最终很糟糕，因为您必须在控制器中进行 DOM 操作。

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

于 2012-07-03T15:38:39.237 回答