テンプレートとビュールートをまたいだ基本要素のバインディング、Angular JS

Angular JSを効果的に使用する方法を学習しています。そして私はここで問題を解決するのは簡単だと思いますが、私が探していることを行うための正しい構文を見つけることはできません。テンプレートとビュールートをまたいだ基本要素のバインディング、Angular JS

のindex.html：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script> 
     var app =angular.module('adt', []); 

     app.config(['$routeProvider', 
      function($routeProvider) { 
       $routeProvider 
       .when('/add', { 
        templateUrl: 'add.html', 
        controller: 'MainCtrl' 
       }) 
       .otherwise({ 
        redirectTo: '/add' 
       }); 
      }]); 

     app.controller('MainCtrl', ['$scope', function ($scope) { 
      $scope.numberCounter = 0; 

      $scope.addOne = function(){ 
       $scope.numberCounter +=1; 
      }; 
     }]); 
</script> 
</head> 

<body ng-app="adt" ng-controller="MainCtrl"> 
    <a href="" ng-click="addOne()">AddNumber</a> 
    {{numberCounter}} 
    <br> 
    <div ng-view></div> 
</body>

私はJavaScriptも、この基本的な例では、私のHTMLに含まれています。

add.html：この単純なアプリは何

ADDD 
{{numberCounter}}

は追加番号と呼ばれる私のリンクがクリックされるたびにnumberCounter私のスコープは、変数インクリメントです。ナンバーカウンターはメインテンプレートビューで機能しますが、ビュールーティング（add.htmlというビュー内）では、ナンバーカウンターはクリック時に更新されません。しかし、手動で番号を設定すると、ビューadd.htmlが番号を更新します。私はここで何が欠けているのですか？両方の番号を更新するにはどうすればよいですか？私の質問がはっきりしないかどうか教えてください。ありがとうございます！

出典

2016-07-13 Matt Kimball

おそらくplunker/codepen/etcを作成する方が良いでしょう。 – Denis

問題はhtmlコードです。コントローラ内にng-viewを含めるべきではありません（MainCtrlを<body>に追加しました）。次のよう

変更して、

<body ng-app="adt"> 
    <div ng-view=""></div> 
</body>

そして、次のようにあなたのadd.htmlがあることが必要で

、

<a href="#" ng-click="addOne()">AddNumber</a> 
{{numberCounter}}

角度は、それがの内容と属性ng-viewと<div>移入し、ある何$routeProvider（お客様の場合はadd.html）を通じて設定されたhtmlファイルと、対応するコントローラ（お客様のケースではMainCtrl）を読み込みます。

Eidt：

あなたはすべてのビュー間でaddNumber()機能は、あなたが$rootScopeに追加することができますかあなたはこれでng-view前に別のdivを持つことができることが必要な場合。 2番目のアプローチは、私があなたに最も適していると感じているものです。

HTML：

<body ng-app="adt"> 
    <div ng-controller="MainCtrl> 
     <a href="#" ng-click="addOne()">AddNumber</a> 
     {{numberCounter}} 
    </div> 

    <div ng-view=""></div> 
</body>

私はこのコードをテストしていませんが、それは主に動作するはずです。ですから、どんな問題でもお気軽にコメントしてください。

出典

2016-07-13 18:55:31 Chinni

Chinniに返信してくれてありがとう、私は助けに感謝します。あなたの解決策は、私のAddNumberリンク/ボタンを私のadd.htmlに入れることです。しかし、私はリンクがメインビューになるようにする必要があるので、異なるビューがルーティングされたときにアクセスできるようにする必要があります。これは、私が現在取り組んでいることを単純化したものに過ぎず、将来的にはもっと多くの意見があります。 –

なぜあなたはそれを望んでいるのかわかりません。しかし私は自分のコードを編集しました。これをチェックしてください。 – Chinni

テンプレートとビュールートをまたいだ基本要素のバインディング、Angular JS

答えて

関連する問題