37

コントローラ関数のディレクティブの属性にアクセスしようとしています。しかし、私がそれにアクセスするまでには、それは未定義です。簡単なタイマーを使えばうまくいくことに気づきました。ディレクティブとそのスコープの準備ができて使用できるように設定された後でのみコードを実行する方法はありますか？

私はそれをいじった。コンソールが開いていることを確認してください。http://jsfiddle.net/paulocoelho/uKA2L/1/

これが私がフィドルで使用しているコードです：

<div ng-app="testApp" >
    <testcomponent text="hello!"></testcomponent>
</div>

var module = angular.module('testApp', [])
    .directive('testcomponent', function () {
    return {
        restrict: 'E',
        template: '<div><p>{{text}} This will run fine! </p></div>',
        scope: {
            text: '@text'
        },
        controller: function ($scope, $element) {
            console.log($scope.text); // this will return undefined
            setTimeout(function () {
                console.log($scope.text);    // this will return the actual value...
            }, 1000);
        },
        link: function ($scope, $element, $attrs) {
            console.log($scope.text);
            setTimeout(function () {
                console.log($scope.text);
            }, 1000);
        }
    };
});
4

6 に答える 6

27

設定した場合、機能するのは

scope.text = $attrs.text;

リンクとコントローラー機能の内部。2way-databinding がないため、これは最初の段階でのみ機能します。ただし、 $attrs.observeを使用できます。

フィドルを参照してください：http://jsfiddle.net/JohannesJo/nm3FL/2/

于 2013-03-01T05:50:46.103 に答える
25

分離スコープでは、'@' で定義されたローカル スコープ プロパティは、リンク関数でアクセスできません。@remigio が既に述べたように、そのようなローカル スコープ プロパティはundefinedその時点にあります。(補間された) 値を非同期的に取得するには、$attrs.$observe() または $scope.$watch() を使用する必要があります。

属性に定数値を渡す場合 (つまり、補間が不要、つまり、属性の値に {{}} が含まれていない場合)、「@」、$observer、または $watch は必要ありません。$attrs を使用できます。@hugo が提案するようにattribute_nameを 1 回使用するか、数値またはブール値を渡して適切な型を取得する場合は、 $scope.$eval($attrs. attribute_name ) を 1 回使用できます。

「=」を使用してローカル スコープ プロパティを親スコープ プロパティにデータバインドする場合、プロパティの値はリンク関数で使用できます ($observe、$watch、または $eval は必要ありません)。

于 2013-03-01T22:17:43.173 に答える
1

リンク関数は $digest ループの前に呼び出され、その時点でスコープ変数は未定義です。リンク機能がどのように動作するかを理解するには、この章と他の章を参照してください。リンク関数は、モデルを操作するのではなく、ディレクティブのウォッチや動作を定義するためにのみ使用します。これはコントローラーで行われます。

于 2013-03-01T07:35:43.200 に答える
0

ディレクティブを使用してビューに挿入するためにディレクティブからこの値にアクセスしている場合は、$compile API を使用してこの属性にアクセスし、次のようにすることができます。

var string = "<div> " + scope.text + "</div>";
$compile(string)(scope, function(cloned, scope){
       element.append(cloned);
});
于 2015-04-28T21:32:58.067 に答える