$ scopeモデルにアクセスできない

Question

私のメインのhtmlでは、テンプレートを読み込むビューがあります。

<div data-ng-view></div> 

リンクをクリックするたびにHTMLが読み込まれます。このページ（テンプレート）で

app.config(["$routeProvider", function ($routeProvider) { 
'use strict'; 

$routeProvider 
    .when("/", { 
     templateUrl: "events.html"  
    }); 

}]); 

、私はその後、郵便ポストに<div data-ng-Post></div>

を使用して、私のevents.htmlページにこのディレクティブを使用して、別のhtmlファイル

app.directive('ngPost', function() { 
'use strict'; 

return { 
    restrict: 'A', 
    templateUrl: 'postbox.html' 
}; 


}); 

をロードするディレクティブを持っています2つの入力フィールドとボタンがあります

<input type="text" id="user" data-ng-model="username" /> 
<input type="text" id="mess" data-ng-model="message"/> 
<button data-ng-click="Add(eventid-1, username, message)">Post</button> 

私はいくつかの操作をしていますが、入力フィールドをクリアしようとしていますが、できません。方法はこちら：

$scope.Add = function (index, uname, msg) { 

    var a = {user: uname, message: msg, time: new Date()}; 

    $scope.data[index].messages.push(a); 

    $scope.message = ''; // clearing here 
    $scope.username =''; 


}; 

クリアが発生しない、私はなぜわからない。このAddメソッドを持つコントローラは、<div data-ng-view></div>をメインのhtmlファイルにラップするので、最も外側のコントローラであり、内部のすべての$ scopeモデルにアクセスできるはずです。なぜそれは機能しませんか？ クリア前の操作は問題なく動作します。

Answer 1

addメソッドは親スコープにあります。親のスコープはそれが子供であることを見ることはできません。 messageプロパティとusernameプロパティは、ディレクティブの子スコープで定義されています。子からは親プロパティを参照できますが、その逆はできません。

スコープ追加する場合：偽とtransclude：あなたの指示に虚偽を、それが自分のスコープの作成しません、代わりにあなたのディレクティブは次のようになりますので、その親のスコープを使用します。

angular.module('app', []).controller("myController",myController); 

    function myController($scope){ 
     var ctrl = this; 
     ctrl.hello ="Hello" 

    }; 

    angular.module('app').directive("childThing", function() { 
     return { 
      template: '<div>{{message}}</div><div>{{username}}</div>', 
      scope: false, 
      transclude: false, 
      controller: function($scope) { 
       $scope.username="Mike Feltman" 
       $scope.message="Hi Mike" 
      } 
     } 
    }) 

とあなたのテンプレートを使用して

<div ng-controller="myController as ctrl"> 
     {{username}} in the parent. 
     <div>{{ctrl.hello}}</div> 
     <child-thing></child-thing> 
    </div> 

更新： {{ユーザー名}}親にあなたはディレクティブは、このように親からスコープに追加する要素にアクセスすることができます。 {{ctrl.hello}}

のJavascript：

関数myController（$の範囲）{ するvar CTRL =この; ctrl.hello =「こんにちは」

$scope.add = function() { 
     alert($scope.username) 
    } 

}; 

angular.module('app').directive("childThing", function() { 
    return { 
     template: '<input type="text" id="user" data-ng-model="username" /><input type="text" id="mess" data-ng-model="message"/>', 
     scope: false, 
     transclude: false, 
    } 
})