javascript - 使用 ng-repeat 作用域上的 Angular $compile 不起作用

Question

我有一个使用该$compile服务生成模板的指令。即使我清楚地在我的范围内设置了数组，它也不会使用ng-optionsor生成选择选项。为什么这不起作用？这只是给了我一个没有选项的空白字段。ng-repeatusers<select>

angular.module("myApp").directive("selectForm", [
  '$compile',
  function($compile) {
    return {
      restrict: 'C',
      scope: true,
      link: function(scope, element, attrs) {

        scope.users = [
          { id: 1, name: "User 1" },
          { id: 2, name: "User 2" }
        ];

        element.on('click', function(e) {

          var selectHtml = $compile('\
            <select\
              class="col-lg-2 form-control"\
              ng-options="user.id as user.name for user in users">\
            </select>\
          ')(scope);

          $(element).html(selectHtml);
        });

      }
    }
  }

]);

Answer 1

您的代码中需要更改一些内容以使其正常工作：

• <select>仅当您还提供时才有效ng-model
• 将您的代码包装在scope.$apply.
• 调用element.off("click")取消订阅事件以避免闪烁。

演示