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

Question

因此，我正在解决有关ngOptions内ngOptions指令的ngInclude 。 我遇到了显示该指令正常工作的示例代码，将其复制粘贴到其中，然后看到我两个（无法运行的）旧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，在控制器内：

//...
$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控制器现在也具有以下几行：

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

是什么使它起作用了？

Answer 1

ngOptions在您的旧代码中可以正常工作，我用您的旧代码小部件plunker制作了一个plunker $scope.widget = {}; 和$scope.objectTypes = ["something"]; 被添加以使您的代码正常工作。