如何在控制器范围内调用更改事件?
How to call change event within controller scope?
我在 angular 应用程序中调用更改事件时遇到问题。我的代码结构如下:
<div class="content-area" ng-app="management">
<div class="project-table-wrapper" ng-controller="listCtrl">
<!-- This is the list of the project -->
<div class="">....</div>
<a class="btn btn-success btn-addeditproject btn-addproject" ng-click="openAddProjectDialog()" href="javascript:;">
<i class="fa fa-plus-circle"></i>
Add Project
</a>
</div>
<div ng-controller="addCtrl">
<div class="search-box">
<div class="search-input-wrap">
<input placeholder="Search"
type="text"
id="searchInput" class="searchInput"
data-searchFor="newPro"
ng-model="suvery_search" ng-change="addCtrl.liveSearch(suvery_search)" >
<i class="fa fa-search"></i>
</div>
<button class="btn-search searchIt" ng-click="addCtrl.liveSearch(suvery_search)" name="searchIt" value="Go"></button>
</div>
</div>
</div>
控制器 Js:
projectApp.controller('addCtrl', function ($scope, $window, $http, $timeout, $modal) {
$scope.liveSearch = function(suvery_search) {
console.log(suvery_search);
}
});
projectApp.controller('listCtrl', function ($scope, $http, $window, $timeout) {
...
});
虽然我在搜索事件上触发更改事件,liveSearch
函数不会调用 addCtrl
中编写的函数。而不是这个如果我写相同
listCtrl 中的函数这工作正常。
我不明白这种行为,有人可以帮忙吗?
问题出在事件绑定的语法上。您必须从 ng-change="liveSearch(suvery_search)"
视图中调用控制器函数,对于 click
事件也是如此。
var projectApp = angular.module("management", []);
projectApp.controller('addCtrl', function ($scope, $window, $http, $timeout) {
$scope.liveSearch = function(suvery_search) {
console.log("addCtrl", suvery_search);
}
});
projectApp.controller('listCtrl', function ($scope, $http, $window, $timeout) {
$scope.liveSearch = function(suvery_search) {
console.log("listCtrl", suvery_search);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="content-area" ng-app="management">
<div class="project-table-wrapper" ng-controller="listCtrl">
<!-- This is the list of the project -->
<div class="">....</div>
<a class="btn btn-success btn-addeditproject btn-addproject" ng-click="openAddProjectDialog()" href="javascript:;">
<i class="fa fa-plus-circle"></i>
Add Project
</a>
<div class="search-box">
<div class="search-input-wrap">
<input placeholder="Search"
type="text"
id="searchInput" class="searchInput"
data-searchFor="newPro"
ng-model="suvery_search" ng-change="liveSearch(suvery_search)" >
<i class="fa fa-search"></i>
</div>
<button class="btn-search searchIt" ng-click="liveSearch(suvery_search)" name="searchIt" value="Go">Go</button>
</div>
</div>
<div ng-controller="addCtrl">
<div class="search-box">
<div class="search-input-wrap">
<input placeholder="Search"
type="text"
id="searchInput" class="searchInput"
data-searchFor="newPro"
ng-model="suvery_search" ng-change="liveSearch(suvery_search)" >
<i class="fa fa-search"></i>
</div>
<button class="btn-search searchIt" ng-click="liveSearch(suvery_search)" name="searchIt" value="Go">Go</button>
</div>
</div>
</div>
我在 angular 应用程序中调用更改事件时遇到问题。我的代码结构如下:
<div class="content-area" ng-app="management">
<div class="project-table-wrapper" ng-controller="listCtrl">
<!-- This is the list of the project -->
<div class="">....</div>
<a class="btn btn-success btn-addeditproject btn-addproject" ng-click="openAddProjectDialog()" href="javascript:;">
<i class="fa fa-plus-circle"></i>
Add Project
</a>
</div>
<div ng-controller="addCtrl">
<div class="search-box">
<div class="search-input-wrap">
<input placeholder="Search"
type="text"
id="searchInput" class="searchInput"
data-searchFor="newPro"
ng-model="suvery_search" ng-change="addCtrl.liveSearch(suvery_search)" >
<i class="fa fa-search"></i>
</div>
<button class="btn-search searchIt" ng-click="addCtrl.liveSearch(suvery_search)" name="searchIt" value="Go"></button>
</div>
</div>
</div>
控制器 Js:
projectApp.controller('addCtrl', function ($scope, $window, $http, $timeout, $modal) {
$scope.liveSearch = function(suvery_search) {
console.log(suvery_search);
}
});
projectApp.controller('listCtrl', function ($scope, $http, $window, $timeout) {
...
});
虽然我在搜索事件上触发更改事件,liveSearch
函数不会调用 addCtrl
中编写的函数。而不是这个如果我写相同
listCtrl 中的函数这工作正常。
我不明白这种行为,有人可以帮忙吗?
问题出在事件绑定的语法上。您必须从 ng-change="liveSearch(suvery_search)"
视图中调用控制器函数,对于 click
事件也是如此。
var projectApp = angular.module("management", []);
projectApp.controller('addCtrl', function ($scope, $window, $http, $timeout) {
$scope.liveSearch = function(suvery_search) {
console.log("addCtrl", suvery_search);
}
});
projectApp.controller('listCtrl', function ($scope, $http, $window, $timeout) {
$scope.liveSearch = function(suvery_search) {
console.log("listCtrl", suvery_search);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="content-area" ng-app="management">
<div class="project-table-wrapper" ng-controller="listCtrl">
<!-- This is the list of the project -->
<div class="">....</div>
<a class="btn btn-success btn-addeditproject btn-addproject" ng-click="openAddProjectDialog()" href="javascript:;">
<i class="fa fa-plus-circle"></i>
Add Project
</a>
<div class="search-box">
<div class="search-input-wrap">
<input placeholder="Search"
type="text"
id="searchInput" class="searchInput"
data-searchFor="newPro"
ng-model="suvery_search" ng-change="liveSearch(suvery_search)" >
<i class="fa fa-search"></i>
</div>
<button class="btn-search searchIt" ng-click="liveSearch(suvery_search)" name="searchIt" value="Go">Go</button>
</div>
</div>
<div ng-controller="addCtrl">
<div class="search-box">
<div class="search-input-wrap">
<input placeholder="Search"
type="text"
id="searchInput" class="searchInput"
data-searchFor="newPro"
ng-model="suvery_search" ng-change="liveSearch(suvery_search)" >
<i class="fa fa-search"></i>
</div>
<button class="btn-search searchIt" ng-click="liveSearch(suvery_search)" name="searchIt" value="Go">Go</button>
</div>
</div>
</div>