$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>
您应该在 ng-model 中使用点。参考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>
您可以用不同的方式做到这一点 .. 也可以使用 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">
这是 link 编辑后的插件 here
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>
您应该在 ng-model 中使用点。参考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>
您可以用不同的方式做到这一点 .. 也可以使用 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">
这是 link 编辑后的插件 here