簡単な角度指令

Question

私の最初の角度指令を書き、アプリケーションにページ機能を追加しようとしています。 私はこれを単純なものにしておき、コントローラのスコープを共有するだけです。私のコントローラで

、私はスコープと呼ばれるVARあります

console.dir($scope) 

は、コントローラのスコープオブジェクトの内容を確認するために、しかし：私のディレクティブの連携機能インサイド

$scope.pages 

を、私が行うことができますページプロパティにアクセスしようとすると、定義されていません。

私には何が欠けていますか？

ありがとうございます。

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     scope: false, 
     link: function($scope, el, attrs){ 
      console.dir($scope.pages); //returns undefined 
      el.text('hello world'); 
     }, 
    } 
}); 

編集：私は改ページモジュールがそこに出てい承知しているが、私のニーズは控えめであり、私は私自身を構築するディレクティブを構築する方法を学習を開始する簡単な方法だと思いました。

Answer 1

ディレクティブのリンク機能はコントローラの前に実行されるため、このリンクフェーズでは通常スコープ値にアクセスできません。これを行うにはいくつかの方法があります。問題を解決するための最も迅速な方法は$scope.$watchです。だからこのような何かがうまくいくはずです：

これはうまく動作します。私はまた、あなたの時計の式（プロパティ名は基本的に）を渡すために属性を使用することによって、コントローラが少し宣言されている範囲からコントローラを切り離すことを提案します。簡単な例は次のようになります。

<div my-directive="myProperty"> 

link: function($scope, el, attrs) { 
    $scope.watch(attrs.myDirective, function(value) { 
    //do something you need to do with the value here 
    }); 
} 

をただし、あなたが直接時計を呼び出すことなく、それは状態を管理するための専用のコントローラですあなたのディレクティブを提供したいことがありますディレクティブに複雑さを追加します。このコントローラーは、scope: trueのディレクティブ自体に属する子スコープを使用することも、scope: falseの親スコープを使用することもできます。あなたの選択は、おそらく必要に応じて決まります。

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { 
      console.dir($scope.pages); 

     }], 
     link: function($scope, el, attrs){ 
      $element.text('hello world'); 
     } 
    } 
}); 

Answer 2

デフォルトでは、ディレクティブはコントローラとスコープを共有します。これを行うには、あなたのオブジェクトに「スコープ」属性を持たないでください。

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     link: function($scope, el, attrs){ 
      console.dir($scope.pages); 
      el.text('hello world'); 
     }, 
    } 
}); 

Answer 3

@サンドロが正しいです。ディレクティブのscopeプロパティをfalseに設定します。これは、スコープがそのプロパティをコントローラに継承（または共有）しないことを意味します。偽を取り除くと、それはあなたが意図した通りに機能するはずです。

$scopeの使用方法についてのドキュメントはここにある：http://code.angularjs.org/1.2.0-rc.3/docs/api/ng $ rootScope.Scope

それはあなたの範囲を与えるようにディレクティブを作成するための開発者ガイドは、どのようにセットアップあなたのディレクティブを約良い情報をたくさん持っています欲しいです。それらのドキュメントはここにあります：http://code.angularjs.org/1.2.0-rc.3/docs/guide/directive

希望に役立ちます。