$watch не вызывает внутренние вкладки в angularjs?

Вот мой пример на Plunker

Hi All,

В моем примере я создал два текстовых поля ввода, одно вне вкладки, другое внутри. Для обоих я создал функцию часов. Внешний работает нормально, но функция часов внутри вкладки не работает. Оба места имеют одинаковый тип кодирования, только я не знаю, почему одно работает, а другое нет.

Может ли кто-нибудь помочь мне в этом?

angular.module('components', []).
  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
    };
  })
  .controller('sample', function($scope){
    $scope.cancel = function(){
      console.log("cancel")
    }
    $scope.$watch('FirstName', function() {
		console.log("FirstName")
    //  fetch();
    });
    $scope.$watch('FirstName1', function() {
		console.log("FirstName1")
    //  fetch();
    });
      //Here I need to Change Selected Tab
  })
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>

  <head>

 
    
 
  </head>

  <body ng-app="components" ng-controller="sample">
  <h3>BootStrap Tab Component</h3>
  <form role="form" ng-controller="sample">
     <input type="text"  ng-model="FirstName1" class="form-control" id="FirstName1">
  <tabs>
    <pane id="FirstTab" title="First Tab">
      <div><div class="form-group">
    <label for="text">First Name</label>
    <input type="text" required ng-model="FirstName" class="form-control" id="FirstName">
  </div>
 <div class="form-group">
    <label for="text">Middle Name</label>
    <input type="text" required ng-model="MiddleName" class="form-control" id="MiddleName">
  </div>
  <div class="form-group">
    <label for="text">Last Name</label>
    <input type="text" required ng-model="LastName" class="form-control" id="LastName">
  </div>
  
  </div>
    </pane>
    <pane id="SecondTab" title="Second Tab">
      <div>
        <div class="form-group">
          <label for="text">Contact</label>
          <input type="text" required ng-model="Contact" class="form-control" id="Contact">
        </div>
       <div class="form-group">
          <label for="text">Address1</label>
          <input type="text" required ng-model="Address1" class="form-control" id="Address1">
        </div>
        <div class="form-group">
          <label for="text">Address2</label>
          <input type="text" required ng-model="Address2" class="form-control" id="Address2">
        </div>
      </div>
    </pane>
     <pane id="ThirdTab" title="Third Tab">
      <div>
          <div class="form-group">
          <label for="text">Phone</label>
          <input type="text" required ng-model="Phone" class="form-control" id="Phone">
        </div>
       <div class="form-group">
          <label for="text">Mobile</label>
          <input type="text" required ng-model="Mobile" class="form-control" id="Mobile">
        </div>
        <div class="form-group">
          <label for="text">Mobile1</label>
          <input type="text" required ng-model="Mobile1" class="form-control" id="Mobile1">
        </div>
      </div>
    </pane>
     <pane id="FourthTab" title="Fourth Tab">
      <div>This is the content of the Fourth tab.</div>
    </pane>
  </tabs>
    <button type="submit" ng-click="Submit()" class="btn btn-default">Submit</button>
    <button type="reset" ng-click="cancel()" class="btn btn-default">Cancel</button>
</form>
</body>

</html>


javascript angularjs angularjs-scope angularjs-watch
person Suresh B    schedule 23.02.2016    source источник
comment
Можете ли вы поместить код в свой вопрос? Потому что я не собираюсь щелкать какую-то случайную ссылку во время работы, плюс, если кода недостаточно, чтобы хорошо вписаться сюда, вам нужно сначала сузить источник проблемы.   -  person Marty    schedule 23.02.2016
comment
$scope.$watch('Имя', function() { console.log(Имя) }); $scope.$watch('FirstName1', function() { console.log(FirstName1) });   -  person Suresh B    schedule 23.02.2016
comment
Внутри ng-model='FirstName' снаружи ng-model='FirstName1'   -  person Suresh B    schedule 23.02.2016
comment
@ Марти, я добавил коды сюда. Можете ли вы проверить и сообщить мне, где я сделал ошибку.   -  person Suresh B    schedule 23.02.2016

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны использовать точку в ng-model. Ссылка здесь

Таким образом, ваш код будет работать, если он такой же, как:

В файле javascipt

.controller('sample', function($scope){
    $scope.user = {};
    $scope.cancel = function(){
      console.log("cancel")
    }
    $scope.$watch('user.FirstName', function() {
        console.log("FirstName")
    //  fetch();
    });
    $scope.$watch('FirstName1', function() {
        console.log("FirstName1")
    //  fetch();
    });
      //Here I need to Change Selected Tab
  })

В HTML-файле:

<pane id="FirstTab" title="First Tab">
    <div><div class="form-group">
        <label for="text">First Name</label>
        <input type="text" required ng-model="user.FirstName" class="form-control" id="FirstName">
    </div>
        <div class="form-group">
            <label for="text">Middle Name</label>
            <input type="text" required ng-model="user.MiddleName" class="form-control" id="MiddleName">
        </div>
        <div class="form-group">
            <label for="text">Last Name</label>
            <input type="text" required ng-model="user.LastName" class="form-control" id="LastName">
        </div>

    </div>
</pane>
person dieuhd    schedule 23.02.2016

arrow_upward
1
arrow_downward

Вы можете сделать это по-другому.. также используя ng-change.. Он следит за любыми изменениями в модели и соответственно вызывает функцию. Добавьте это вместо $watch.

 $scope.change = function() {
  console.log("FirstName")
}

В шаблоне вызовите ng-change следующим образом

    <input type="text" required ng-model="FirstName" ng-change="change()" class="form-control" id="FirstName">

Вот ссылка на отредактированный планк здесь

person Harsha Attray    schedule 23.02.2016