$ watch不是在angularjs的标签内调用？
[英]$watch is not calling inside tabs in angularjs?
问题描述
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>
2 个解决方案
解决方案1
2 已采纳 2016-02-23 07:32:51
您应该在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>
解决方案2
1 2016-02-23 07:42:12
您可以以其他方式执行此操作..也可以使用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">
这里的链接编辑普拉克这里
在Angularjs $ watch中使用Closure
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.