リンク関数とコントローラーを使用して簡単なディレクティブを作成しました。
コントローラーのスコープに設定されたプロパティにアクセスする必要がありますが、未定義と言い続けます。
ディレクティブ:
app.directive('calendarSelectFilter', ['$log', 'eventService', function( $log, eventService ) {
return {
restrict: 'E',
scope: {
startingValue: '=',
selected: "=value",
filterType: '='
},
controller: function( $scope ){
var options =[];
console.log($scope); //LOG ONE
console.log($scope.filterType); //LOG TWO
switch( $scope.filterType ){
case 'environment':{
console.log( 'fetching envOptions' );
options = eventService.getSchemaLabelsAsArray('envOptions');
} break;
case 'event-type':{
options = eventService.getSchemaLabelsAsArray('eventNames');
} break;
}
$scope.options = options;
},
link: function( scope, element, attrs ){
if( !attrs.filterType ){
$log.error( 'No filterType passed to the calendarSelectFilter directive' );
}
scope.filterType = attrs.filterType;
scope.selected = scope.startingValue;
},
template: '<select ng-model="selected" ng-options="option for option in options">{{option}}</select>'
}
}]);
これはディレクティブの使用例です:
<calendar-select-filter value="filter_options.environment" filter-type="environment"></calendar-select-filter>
コントローラーには、2 つの console.log があります。
コンソール ログ 1 は以下を出力します。
k {$id: "007", $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null…}
$$asyncQueue: Array[0]
$$childHead: null
$$childTail: null
$$destroyed: false
$$isolateBindings: Object
$$listenerCount: Object
$$listeners: Object
$$nextSibling: a.$$childScopeClass.$$childScopeClass
$$phase: null
$$postDigestQueue: Array[0]
$$prevSibling: null
$$watchers: Array[6]
$id: "007"
$parent: a.$$childScopeClass.$$childScopeClass
$root: k
filterType: "environment"
options: Array[0]
selected: undefined
startingValue: undefined
this: k
__proto__: k
しかし、その後、2 つの出力をコンソールに出力します。
undefined
ディレクティブ コントローラーの "filterType" にアクセスする必要がありますが、どうすればよいですか?
スコープには k という名前の内部にすべてがネストされていることがわかりますが、コンソール ログに $scope.ki も undefined ?!