javascript - 指令在 Controller 中将 ng-model 值返回为空

Question

我使用下面的代码作为指令，同时使用此代码 ng-model 在 Controller 中返回空值。

myApp.directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: [ "$scope", function($scope) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        };

        this.addPane = function(pane) {
          if (panes.length === 0) $scope.select(pane);
          panes.push(pane);
        };
      }],
      template:
        '<div class="tabbable">' +
          '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
              '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
          '</ul>' +
          '<div class="tab-content" ng-transclude></div>' +
        '</div>',
      replace: true
    };
  }).
  directive('pane', function() {
    return {
      require: '^tabs',
      restrict: 'E',
      transclude: true,
      scope: { title: '@' },
      link: function(scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      template:
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
      replace: true
    };
});

在选项卡下有两个文本字段

<form role="form">
    <legend>Add City</legend>

    <div class="form-group">
      <label for="">State</label>
      <input type="text" ng-model="location.state" id="input" class="form-control" placeholder="Enter state name">
    </div>

    <div class="form-group">
       <label for="">City</label>
       <input type="text" ng-model="location.city" id="input" class="form-control" placeholder="Enter city name">
    </div>

    <button type="button" class="btn btn-success">Create</button>
    <button type="button" ng-click="UpdateCity()" class="btn btn-warning">Update</button>
</form>

如果我尝试在 Controller 中获取 $scope.location.city 和 $scope.location.state 值，则会得到空值，但如果我检查 {{location.city}} 看来正在获得值(value)。

在使用 tab 指令之前表单工作正常，在使用 tab 指令之后出现此错误。

Answer 1

您使用具有隔离范围的 tab 指令，因此如果您不在所需范围内创建 location 对象，它将被添加到本地选项卡范围，并且您无法在 Controller 中访问它。