コントローラ内部のディレクティブを使用していないため

Question

以下のコードでは、controllerAsはwidgetとfilterディレクティブでは動作しません。

問題を解決するために手伝ってください。 私はどこが間違っているのか分かりませんでした。 :-(

予想される出力：

ウィジェットディレクティブは、「フィルタディレクティブから」「ウィジェット・コントローラから」

フィルタディレクティブは、印刷してくださいを印刷する必要があります

を、私は、問題を再現。 here、確認してください

HTML：。

<div ng-app="myApp"> 

    <body-dir> 
    <icon-dir> 
     <filter-dir> 

     </filter-dir> 
    </icon-dir> 

    <widget-dir> 

    </widget-dir> 
    </body-dir> 
</div> 

の

JS：

var myApp = angular.module('myApp', []); 
myApp.controller('filterController', function filterController($scope) { 
    var vm = this; 
    vm.test = "From filter directive"; 
    alert("filter"); 
    return vm; 
}); 
myApp.controller('widgetController', ['$scope', function widgetController($scope) { 
    var oki = this; 
    oki.widget = "From widget controller"; 
    alert("widget"); 
    return oki; 
}]) 
myApp.directive('bodyDir', function() { 
    return { 
    restrict: 'E', 
    link: function($scope) { 
     alert('body-dir'); 
    } 
    }; 
}); 

myApp.directive('widgetDir', function() { 
    return { 
    restrict: 'E', 
    controller: 'widgetController', 
    controllerAs: 'oki', 
    template: "<span>{{oki.widget}}</span>", 
    link: function($scope) { 
     alert('widget-dir'); 
    } 
    }; 

}); 
myApp.directive('filterDir', function() { 
    return { 
    controller: 'filterController', 
    controllerAs: 'vm', 
    restrict: 'E', 
    template: "<span>{{vm.test}}</span>", 
    link: function($scope) { 

     alert('filter-dir'); 
    } 
    }; 
}); 
myApp.directive('iconDir', function() { 
    return { 
    restrict: 'E', 
    link: function($scope) { 
     alert('icon-dir'); 
    } 
    }; 

}); 

Answer 1

私が覚えている限りで

、controllerAs was introduced in AngularJS v1.2が、あなたのjsfiddleあなたはv1.0.1デベロッパーを使用していました。そのため、controllerAsはウィジェットとフィルタのディレクティブでは機能しません。