演示

Question

我刚开始学习角度并且坚持这个问题。我在AngularJS : Why ng-bind is better than {{}} in angular?上看到{{}}和ng-bind会给你相同的结果。但是，下面的代码不是这样的：

JS

(function () {
    angular
        .module("myApp", [])
        .controller("selectCtrl2", function ($scope, $http) {
            $http({
                method: "GET",
                url: "http://localhost/testService/name.php"
            })
            .then(function (response) {$scope.names = response.data.content;},
             function (response) {$scope.names = response.statusText;});
        });
})();

HTML

<body data-ng-app="myApp">
    <div data-ng-controller="selectCtrl2">
        <select>
            <option data-ng-repeat="x in names">
                <span data-ng-bind="x"></span>
            </option>
        </select>
    </div>
</body>

ng-repeat实际上创建了3个选项标签，但它们的innerHTML只是空格。出于一些奇怪的原因，如果我使用{{x}}，他们的innerHTML将填充我准备的数组中的文本[a，b，c]。我想知道可能是什么原因。

Answer 1

在<span>元素中包含<option>元素是非法的HTML。唯一允许的内容是文本。

将ng-bind directive移至<option> element，它将有效。

演示

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app>
    <div ng-init="names=['fred','sam','jane']">
     
        <select>
            <!-- ILLEGAL HTML
            <option data-ng-repeat="x in names">
                <span data-ng-bind="x"></span>
            </option>
            -->

            <!-- PERMITTED -->
            <option data-ng-repeat="x in names" ng-bind="x">
            </option>
        </select>
    </div>
  </body>

ng-bind directive作为<option> element的一部分，该指令将仅插入Angular Expression的文本结果，该结果是合法的HTML和允许的内容。

来自MDN文档：

HTML <option>元素用于定义<select>，<optgroup>或<datalist>元素中包含的项目。因此，可以表示弹出窗口中的菜单项和HTML文档中的其他项目列表。
Content categories   None.
Permitted content    Text, possibly with escaped characters (like `&eacute;`).
— MDN HTML Element Reference - <option>

另见，

AngularJS select Directive API Reference - Using ngRepeat to generate select options

Answer 2

来自the answer by Konstantin Krass：

这个ng-bind是一个指令，会在传递的上面放置一个观察者   变量。因此ng-bind仅适用于传递的值   实际上是改变。

另一方面，括号将脏检查并刷新   每个 $digest，即使不必要。 ¹

更新

主要原因是the answer由georgeawg

解决的

¹ <子> https://stackoverflow.com/a/23382400/1575353

data-ng-bind不适用于<option>元素

2 个答案:

演示

更新