Direktive, die den ng-Modellwert als leer im Controller

Question

zurückgibt Verwenden Sie den untenstehenden Code für die Direktive, während Sie diesen Code ng-model verwenden, der einen leeren Wert im Controller zurückgibt.

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 
    }; 
}); 

Unter dem Reiter sind mit zwei Textfeldern

<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> 

wenn ich versuche, für $scope.location.city und $scope.location.state Wert in der Steuerung zu erhalten ist leeren Wert bekommen, aber wenn ich {{location.city}} im Hinblick überprüfe Wert immer ist.

vor der Verwendung der Registerkarte Direktive Formular funktioniert einwandfrei, nach der Verwendung der Registerkarte Direktive bekomme ich diesen Fehler.

Answer 1

Sie verwenden tab-Anweisung, die isolieren Bereich haben, also wenn Sie location Objekt im benötigten Bereich nicht erstellen, würde es zum lokalen Bereich der Registerkarte hinzugefügt werden, und Sie können nicht auf Ihrem Controller zugreifen.