I've got some problem. I wrote function which cleans input by button click, but it doesn't work when I use $stateProvider and cleaning is implemented in state.
我有一些问题。我编写了通过按钮点击清除输入的功能,但是当我使用$ stateProvider并且在状态中实现清理时它不起作用。
app.js:
<script>
var app = angular.module("app", ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/first");
$stateProvider
.state("first", {
url: "/first",
templateUrl: "first.html"
})
.state("second", {
url: "/second",
templateUrl: "second.html"
});
});
app.controller("ctrl", function($scope){
$scope.searchAll = "";
$scope.clearSearch = function () {
$scope.searchAll = "";
};
});
</script>
page:
<body ng-controller = "ctrl">
<div class = "container" >
<button type="button" class="btn btn-success"><a ng-href="#/first">First</a></button>
<button type="button" class="btn btn-success"><a ng-href="#/second">Second</a></button>
<br>
<ui-view><ui-view>
</div>
</body>
State first:
FIRST SIDE!!!!!
<input type="text" class="form-control" ng-model="searchAll"></input>
<a href="" data-ng-click="clearSearch()">X</a>
State second:
SECOND SIDE!!!!
1 个解决方案
#1
0
I am not 100% sure from your description, but at a guess the attributes in your state templates will not be getting bound to the $scope of your controller as they are not present at the time when your full page controller is instantiated.
我不是100%肯定你的描述,但猜测你的状态模板中的属性将不会被绑定到控制器的$ scope,因为它们在实例化整个页面控制器时不存在。
So, a few things:
所以,有一些事情:
You are better off having a separate controller for each of the ui-views rather than having a single controller for the full page, that way the controller is bound to the individual state template when you move to that state.
最好为每个ui视图配备一个单独的控制器,而不是为整页提供单个控制器,这样当你移动到该状态时,控制器就会绑定到单个状态模板。
$stateProvider
.state("first", {
url: "/first",
templateUrl: "first.html",
controller: 'FirstCtrl as first'
})
Rather than have an empty href for the clear button which can cause browser refreshes unless you add a e.preventDefault(); to the click event it is easier to use a span or div tag.
除非添加e.preventDefault(),否则清除按钮的空白href可能会导致浏览器刷新;对于click事件,使用span或div标签更容易。
Use ui-srefs for the links to each state rather than ng-href, eg.
使用ui-srefs链接到每个状态而不是ng-href,例如。
<a ui-sref="first">First</a>
Finally, it is a good time to stop using $scope as it is disappearing in Angular 2, and is no longer best practice in Angular 1.* apps - use controller as syntax instead - https://toddmotto.com/digging-into-angulars-controller-as-syntax/
最后,现在是停止使用$ scope的好时机,因为它在Angular 2中消失了,并且不再是Angular 1中的最佳实践。* apps - 使用控制器作为语法 - https://toddmotto.com/digging-into -angulars控制器-AS-语法/
See your code with above changes at https://plnkr.co/edit/3yStlPEozNGM886nEoXg?p=preview - and clear button works as expected
通过https://plnkr.co/edit/3yStlPEozNGM886nEoXg?p=preview查看您的代码并进行以上更改 - 并且清除按钮按预期工作
#1
0
I am not 100% sure from your description, but at a guess the attributes in your state templates will not be getting bound to the $scope of your controller as they are not present at the time when your full page controller is instantiated.
我不是100%肯定你的描述,但猜测你的状态模板中的属性将不会被绑定到控制器的$ scope,因为它们在实例化整个页面控制器时不存在。
So, a few things:
所以,有一些事情:
You are better off having a separate controller for each of the ui-views rather than having a single controller for the full page, that way the controller is bound to the individual state template when you move to that state.
最好为每个ui视图配备一个单独的控制器,而不是为整页提供单个控制器,这样当你移动到该状态时,控制器就会绑定到单个状态模板。
$stateProvider
.state("first", {
url: "/first",
templateUrl: "first.html",
controller: 'FirstCtrl as first'
})
Rather than have an empty href for the clear button which can cause browser refreshes unless you add a e.preventDefault(); to the click event it is easier to use a span or div tag.
除非添加e.preventDefault(),否则清除按钮的空白href可能会导致浏览器刷新;对于click事件,使用span或div标签更容易。
Use ui-srefs for the links to each state rather than ng-href, eg.
使用ui-srefs链接到每个状态而不是ng-href,例如。
<a ui-sref="first">First</a>
Finally, it is a good time to stop using $scope as it is disappearing in Angular 2, and is no longer best practice in Angular 1.* apps - use controller as syntax instead - https://toddmotto.com/digging-into-angulars-controller-as-syntax/
最后,现在是停止使用$ scope的好时机,因为它在Angular 2中消失了,并且不再是Angular 1中的最佳实践。* apps - 使用控制器作为语法 - https://toddmotto.com/digging-into -angulars控制器-AS-语法/
See your code with above changes at https://plnkr.co/edit/3yStlPEozNGM886nEoXg?p=preview - and clear button works as expected
通过https://plnkr.co/edit/3yStlPEozNGM886nEoXg?p=preview查看您的代码并进行以上更改 - 并且清除按钮按预期工作