AngularJS：状態で入力クリーニングが機能しない

問題があります。ボタンのクリックで入力を消去する関数を書いていますが、$ stateProviderを使うと機能しませんし、状態でのクリーニングも実装されています。AngularJS：状態で入力クリーニングが機能しない

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>

ページ：

<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>

州立最初：

FIRST SIDE!!!!! 
<input type="text" class="form-control" ng-model="searchAll"></input> 
<a href="" data-ng-click="clearSearch()">X</a>

州秒：

SECOND SIDE!!!!

出典

2016-08-22 Luq

なぜこのことをしていますか？その単純な理由はなぜこれを州で使用しているのですか？ –

私はページをリフレッシュせずに変更する必要があり、このページの1つにボタンでクリーニングする必要がある入力が含まれています。そのシンプルだが、doesnt仕事。 – Luq

あなたの説明から100％確信しているわけではありませんが、状態テンプレートの属性は、フルページコントローラがインスタンス化された時点では存在しないため、コントローラの$範囲にバインドされません。

ので、いくつかのこと：

あなたはUI-ビューのそれぞれに別々のコントローラを持つのではなく、完全なページのための単一のコントローラを持ったほうが良いですが、その方法は、コントローラは、個々の状態にバインドされていますその状態に移行するとテンプレートが表示されます。あなたは（）e.preventDefaultを追加しない限り、ブラウザを引き起こす可能性がありますクリアボタン用の空のhrefを持っているのではなく

$stateProvider 
    .state("first", { 
     url: "/first", 
     templateUrl: "first.html", 
     controller: 'FirstCtrl as first' 
    })

が更新されます。 clickイベントにspanまたはdivタグを使用する方が簡単です。

ng-hrefではなく、各状態へのリンクにui-srefsを使用します。

<a ui-sref="first">First</a>

それは角度2に消えているよう最後に、$スコープを使用して停止する良い時間で、もはや角1 *アプリでのベストプラクティスではありません - 代わりに、構文としてコントローラを使用 - https://toddmotto.com/digging-into-angulars-controller-as-syntax/

を

上記の変更を加えたコードをhttps://plnkr.co/edit/3yStlPEozNGM886nEoXg?p=previewに表示し、クリアボタンが期待どおりに機能します

出典

2016-08-22 10:05:44 glendaviesnz

どうもありがとう、しかし、2つのコントローラーが私に別の問題を与える。これら2つのコントローラ間で変数をどのように転送できますか？ localStorageなどを使用する必要がありますか？ – Luq

これを行う最善の方法は、おそらくこの小さな例のために過剰なサービスを持つことですが、これはスケーラビリティが最も優れています。これをplunkrに追加しますが、明日までは時間がありません。 – glendaviesnz

plunkrに基本的なサービスを追加して、コントローラ間でデータを共有する方法を示しました。コントローラを単一のビューに集中させ、再利用可能なロジックとデータをサービスに移動させてください。 – glendaviesnz

AngularJS：状態で入力クリーニングが機能しない

答えて

関連する問題