$ часы не звонят внутри вкладок в angularjs?

Вот my example on 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() { 
 
\t \t console.log("FirstName") 
 
    // fetch(); 
 
    }); 
 
    $scope.$watch('FirstName1', function() { 
 
\t \t 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>

источник

2016-02-23 Suresh B

Вы можете поставить код в ваш вопрос? Потому что я не буду нажимать на какую-то случайную ссылку во время работы, плюс, если кода недостаточно, чтобы хорошо поместиться здесь, тогда вам нужно сначала сузить источник проблемы. – Marty

$ scope. $ Watch ('FirstName', function() { \t \t console.log ("FirstName") }); $ scope. $ Watch ('FirstName1', function() { \t \t console.log ("FirstName1") }); –

Внутри ng-model = 'FirstName' за пределами ng-model = 'FirstName1' –

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

Так что ваш код будет работать, если же, как:

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

источник

2016-02-23 07:32:51 dieuhd

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

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

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

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

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

источник

2016-02-23 07:42:12

$ часы не звонят внутри вкладок в angularjs?

ответ

Смежные вопросы