javascript - 注释使 ng-options 起作用，为什么？

Question

所以，我正在解决一个关于 ngInclude 中的 ngOptions 指令的错误。我遇到了显示指令工作的示例代码，将其复制粘贴进去，然后看到我的(未运行的)旧 ngOptions 现在正在运行。我很好奇它是如何工作的。

我无法再访问旧代码，但它看起来像这样:

HTML:

<div ng-controller="Widget" ng-class="{{widget.properties.styleClass}}" ng-init="optionsShow = false" class="irrelevant" "style = "height:100%;" >
    <div>
        <!-- ... -->

        <!-- my options button-->
        <span class="icon" ng-click="showOptions(); adjustHeight()">
           options
        </span>
    </div>

<!-- Options div shows only when button is clicked -->
<!-- Canvas Options -->
<div class="options command-options" ng-show="optionsShow" style="height:50%;">
    <!-- ... -->
    <span ng-click="addCommand()">Add New Command +</span>
    <div class="row">
        <div class="col-xs-3">
            <label>Command to edit:<br/>
                <select  ng-model="selected" ng-change="verifySelected()" ng-options="object as object.index for object in widget.objects"></select>
                <!-- The select here wouldn't show any options no matter what I did -->
            </label>
        </div>
    </div>
</div>
<!-- ... -->

JS，在 Controller 内:

//...
$scope.widget.objects = [];
//...
$scope.addObject = function(){
    $scope.widget.objects.push({index:$scope.widget.objects.length + 1, type:$scope.objectTypes[0]});
}
$scope.addObject();
$scope.verifySelected = function(){
 console.log("irrelevant")
}

工作的 HTML 现在看起来像这样:

<div ng-controller="Widget" ng-class="{{widget.properties.styleClass}}" ng-init="optionsShow = false" class="irrelevant" "style = "height:100%;" >
    <div>
        <!-- ... -->
        <!--  The following comments help make thing work in the options div.  Don't ask why, I don't know.  Just don't remove them

               <b>Total Things:</b> {{totalThings}}
             <p ng-repeat="oneThing in things">
                <input value="{{oneThing.text}}" type="checkbox" ng-model="oneThing.checked" />
                {{oneThing.text}}
                </p>
              <ul class="unstyled">
              <li ng-repeat="oneThing in things">
                    <span>{{oneThing.text}}</span>
        </li></ul>-->
        <!-- my options button, everything below this point unchanged-->
        <span class="icon" ng-click="showOptions(); adjustHeight()">
            options
        </span>
    </div>

<!-- Options div shows only when button is clicked -->
<!-- Canvas Options -->
<div class="options command-options" ng-show="optionsShow" style="height:50%;">
    <!-- ... -->
    <span ng-click="addCommand()">Add New Command +</span>
    <div class="row">
        <div class="col-xs-3">
            <label>Command to edit:<br/>
                <select  ng-model="selected" ng-change="verifySelected()" ng-options="object as object.index for object in widget.objects"></select>
                <!-- The select here wouldn't show any options no matter what I did -->
            </label>
        </div>
    </div>
</div>
<!-- ... -->

工作的 JS Controller 现在也有这些行:

$scope.totalThings = 5;
//...
$scope.things = [{text: 'This is needed in order to make things work... for some reason.'}];

发生了什么让它起作用？

Answer 1

ngOptions 与您的旧代码一起按预期工作，我用您的旧代码做了一个 plunker widget plunker添加了 $scope.widget = {}; 和 $scope.objectTypes = ["something"]; 以使您的代码正常工作。