0

私はAngularJSにかなり慣れていません。

以下に示すように、コントローラーに子スコープを作成しました。しかし、モデルは利用できません/バインディングはhtmlビューで行われません。

HTML View でモデル名を指定する方法がわかりません

var App= angular.module('App', []);
App.controller('myController', function ($scope,$rootScope, $http) {
    var model = $scope.$new();
    model.id = "1";
    model.modelName = "New Model";
    model.cityCode= 1212;
    model.country= "USA";
});

HTML:

 <div  ng-app="App">
    <div ng-controller="myController">
         <label>{{modelName}}<label/>
         <input type="text" ng-model="modelName" />
    </div>
 </div>
4

1 に答える 1

0

これは、間違ったオブジェクトをバインドしているためです。コントローラーには、既に$scope. ビューで使用できる変数を参照します。内部に子スコープを作成する必要はありません。

..neW(); model.id=..使用する代わりに$scope.id=...;

経験則: にはドットが必要ngModel=mymodel.fieldです。これは問題の原因ではありませんが、トラブルを回避できます。そうしないと、ほとんどの人が考えるようにプロトタイプ チェーンが機能しません。http://www.youtube.com/watch?v=ZhfUv0spHCY&t=29m19sを参照してください。

ここでライブに設定しましたhttp://jsfiddle.net/5qu54/

新しいスコープの使用を主張する場合は、コントローラーの要素を再コンパイルする必要があります。サービスは、$compile指定したスコープに html 要素をバインドします。ここでライブをご覧くださいhttp://jsfiddle.net/5qu54/1/

app.controller('myController', function ($element, $scope,$rootScope, $compile) {
    var model = $scope.$new();
    model.id = "1";
    $scope.modelName = "New Model";
    model.cityCode= 1212;
    model.country= "USA";

    console.log("my element is", $element.html()); 
    $compile($element.contents())(model);
});

そして、HTMLで国を追加して、バインディングを確認し、行<label>{{modelName}} {{ country }}<label/> のコメント/コメント解除を試みました$compile(...

update: about$rootScopeおよび$scope: スコープは、共有、プロトタイプとして継承 (rootScope から新しくなる可能性があります)、または分離することができます。作成する必要がある場合もあります。たとえば、デフォルトの ng-repeat が気に入らなかったために要素を繰り返すディレクティブを作成したとします。各要素には独立したスコープが必要です。または、$rootScope.myModel にモデルがあり、$rootScope に既にあるすべてのものにアクセスできる新しい「クリーンな」スコープが必要です: $rootScope.new();。このhttp://docs.angularjs.org/guide/scopeを注意深く読む必要があります。ただし、あなたの場合、別のスコープを作成する必要はありません。バインドするコントローラーでは、MVC アーキテクチャで通常行うように、UI に公開するものを決定します。スコープの作成は通常link、ディレクティブの関数で使用されます。

about $compile: ディレクティブに「なりうる」要素を dom に追加することがあります。たとえば、directives.js にディレクティブ myDir があり、動的に<my-dir>aloha</my-dir>DOM に追加します (たとえば、別のディレクティブのリンク関数がどこかに html を追加します)。これで、ディレクティブをトリガーできる要素ができましたが、angular はそれがそこにあることをまだ認識していません。要素をコンパイルすると、Angular はそれを認識してコードを実行します。

于 2013-09-20T10:39:40.880 に答える