1

私は絶対に困惑しています。私は自分が何をしているのか知っていると思い始め、非常に多くのバリエーションを試しましたが、何が問題なのかわかりません.

http://jsfiddle.net/PCfZV/11/

データ (この場合は数値) を渡す "mylist" というディレクティブを作成しています。

<span ng-repeat="node in [1,2,3,4,5]">
    <mylist counter="{{node}}"></mylist>
</span>

これまでのところ、とても良いです...私のディレクティブの作成はうまくいきます。

var myApp = angular.module('myApp', []);
myApp.directive('mylist', function() {
    return {
        restrict: "E",
        template: "<P>You counted to: '{{inTemplate}}'.</P>",
        replace: true,
        controller: MyCtrl,
        scope: { inTemplate: "@counter" }
    }
});

counterここで、コントローラーを追加すると、 (またはinTemplate) 変数がどこにあるのかわかりません。

function MyCtrl($scope, $http, $attrs, $element) {
    $scope.inTemplate = "blah blah" + $attrs.counter;
}​

いつものように、洞察に感謝します。Angularが私には多すぎるのかもしれません:)

どうもありがとう、

ネイト

4

2 に答える 2

1

カウンターはディレクティブのスコープの一部であり、これはbatarangで詳細に確認できます。

$scope.inTemplate からアクセスできるはずです。私はあなたのフィドルをいじって、3つの方法で動作させました：

属性http://jsfiddle.net/PCfZV/46/を使用:

<mylist node="{{node}}"></mylist>

    template: "<P>You counted to: '{{countTo()}}'.</P>",
    replace: true,
    controller: MyCtrl,
    scope: {node: '@'}

function MyCtrl($scope, $http, $attrs, $element) {
    $scope.countTo = function(){return "blah blah" + $scope.node};
}​

親スコープhttp://jsfiddle.net/PCfZV/47/へのリンク:

<mylist is-counter="node"></mylist>

    template: "<P>You counted to: '{{inTemplate}}'.</P>",
    replace: true,
    controller: MyCtrl,
    scope: {
        "isCounter": "="
    }

式http://jsfiddle.net/PCfZV/48/ :

<mylist is-counter="'bla bla' + node"></mylist>

    template: "<P>You counted to: '{{isCounter()}}'.</P>",
    scope: {
        "isCounter": "&"
    }

また、console.log を参照して、コントローラーがインスタンス化されたときの属性の値を把握してください。

于 2012-12-31T19:03:38.497 に答える
0

あなたの投稿では、ディレクティブは「分離スコープ」を作成します-行のためにscope: { ... }。（分離スコープは、親スコープからプロトタイプを継承しません。親スコープとの関係で分離スコープがどのように見えるかなど、その意味について詳しく知りたい場合は、スコープのプロトタイプ/プロトタイプのニュアンスを参照してください。 AngularJSの継承？、セクションディレクティブ）。

作業中のフィドル（@iweinへのコメントで言及）では、ディレクティブは新しいスコープを作成しませんが、コントローラーを定義するため、コントローラーとディレクティブは同じスコープを使用しているため、両方がスコープで定義するプロパティ。あなたのフィドルでis-counter="{{node}}"は、何もしていないので、削除しても機能します。

また、ディレクティブには行が含まれているため、配列アイテム/ノードごとに個別のMyCtrlコントローラーを作成していることに注意してください（これが意図的なものかどうかはわかりません）controller: MyCtrl。AngularはMyCtrlコンストラクター関数を取り、HTMLでディレクティブに遭遇するたびにコントローラーを作成しmylistます（ng-repeatのために5回です）。

通常、HTMLのどこでコントローラーが支配的であるかを指定する必要があります。

<div ng-controller="MyCtrl">
   <span ng-repeat="node in [1,2,7,6,5]">
   ...
   </span>
</div>

（ディレクティブごとにコントローラーをインスタンス化する必要がある場合もありますが、それはあまり一般的ではありません。）

ng-controllerを使用する場合、ディレクティブでコントローラーを指定する必要はありません。ディレクティブは（デフォルトで）親スコープを使用します。つまり、コントローラーと同じスコープを使用します。

コントローラーで何をしようとしているのか正確にはわかりませんが、コントローラースコープにプロパティを定義して、余分なテキストを保持します。

$scope.extraText= "blah blah";

次に、それをテンプレートで使用します。

template: "<P>You counted to: {{extraText}} '{{node}}'.</P>",

フィドル。

Angularは私には多すぎるかもしれません:)

私にとって、AngularJSの学習曲線はかなり急でした（そして私はまだ学習中です）。それをあきらめないでください。素晴らしいフレームワークだと思います。

于 2012-12-31T21:22:59.953 に答える