AngularJS：输入清理在状态下不起作用

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

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