javascript - 无法从 Angular Controller 更新标签文本

Question

HTML 页面上有一个 anchor 标记和一个选择下拉列表，下拉列表绑定(bind)到 angularjs Controller 的作用域变量。

功能:每当下拉列表的选定值发生变化时，它都应该反射(reflect)在 anchor 标记文本中。

问题:首次初始化 Controller 时，下拉列表中的值已设置，但标签的文本未填充。

代码如下:

Angular 代码:在AController.js中

init = function() {
  $scope.month = {'val': ''}; 
  // some intermediate code which populates month

  $("#element-id").val($scope.month.val);

  var i = $("#element-id").closest(".element-panel");
  var t = i.find(".element-label");
  t.text(element.children(":selected").text());
}

init();

HTML 页面:

<div class="element-panel">
  <a class="select-label element-label" id="">Month</a>
  <select id="element-id" ng-model="month.val">
    <option value="" style="display:none;"></option> 
    <option value="1">January</option>
    <option value="2">February</option>
        <!-- more options ... -->
    <option value="12">December</option>
  </select>
</div>

Answer 1

这是一个工作 fiddle .

HTML:

<a class="select-label element-label" ng-model="label">{{selected.label}}</a>
<select id="element-id" ng-model="selected" ng-options="opt.label for opt in months">

Controller :

$scope.months = [
    {id: '1', label: "January"},
    {id: '2', label: "February"},
    {id: '3', label: "December"}
];
$scope.selected = {label: 'Month'};

避免在 Controller 中使用 jQuery。 DOM 操作应该在其他地方处理(指令等)。