更改 Angular 模板时执行 jQuery 语句的问题

Question

我正在开发一个具有 2 个视图的单页应用程序：主页和仪表板。

“家”状态有一个搜索表单。提交表单时，使用$window.location.assign('/#/dashboard'); 加载仪表板视图。

当从搜索加载仪表板视图时，我需要自动将选择框值设置为 0。我有执行此操作的代码，但由于某种原因，它在页面加载时没有执行...我我认为这与 Angular 在加载时向页面添加新的 'select' DOM 元素有关。

仪表板视图

  <div ng-controller="MainCtrl">

    <!-- list all lists -->
    <select id="list-select" class="list-select" ng-model="list" ng-options="list as list.title for list in lists">
        <option value="">Select List</option>
        <!-- when the page loads from search, this will be added...
        <option value="0">search</option>
        -->
    </select>
    <!-- end list -->

    <hr class="dash">

      <!-- words in selected list -->
      <ol ng-model="list.words">
        <li ng-repeat="word in list.words" id="word-{{word.id}}">
          <p>{{ word.title }}</p>
        </li>
      </ol>
    <!-- end words -->

</div>

main.js

$("#list-select").val("0");

请帮忙！

Answer 1

这里有一个非常相似的问题： how to use ng-option to set default value of select element

与其使用 jQuery 尝试设置选择列表的默认值，不如坚持使用 Angular 方法：

<div ng-controller="yourController">
    <select ng-model="prop.value" ng-options="v for v in prop.values">
    </select>
</div>

yourApp.controller('yourController', ['$scope', '$http', function($scope, $http) {
    $scope.prop = { 
        value: 0, 
        values: []
    };

    // not the best way...
    $.getJSON('yourURL', function(data) {
        $scope.prop.values = data;
        $scope.$apply(); // you need to call this
    });

    // the better way
    $http.get('yourURL').success(function(data) {
        $scope.prop.values = data;
    }).error(function(error) {});
}]);

Answer 2

通常，在控制器中操作 DOM 是一种不好的做法。每当模型更新时，您的更改都不会生效，这可能会导致控制器逻辑出现很多问题。

相反，您需要操纵在视图中使用的变量。在这种情况下，您可以在填充列表数组后在控制器中执行以下操作：

$scope.lists.splice(0,0,{ value: 0, title: 'search' });

Answer 3

我几乎只是在寻找一种为选择框设置默认值的方法。

基于此answer，我能够使用ng-init 完成此任务。

   <!-- list all lists -->
  <select ng-model="list" ng-init="list = lists[0]" ng-options="list as list.title for list in lists">
      <option value="">Select List</option>
  </select>
  <!-- end list -->

这会将选择框的值设置为“0”。

感谢所有帮助和提示，将其标记为正确答案。