AngularJS指令へのコントローラのバインド

Question

私はAngularJS指令を理解しようとしています。私は何かしようとしているものの例として、次のJSFiddleを持っています。 https://jsfiddle.net/7smor9o4/

この例でわかるように、vm.alsoId変数はvm.theIdと等しいと予想されます。テンプレートvm.theIdには正しい値が表示されますが、vm.alsoIdは表示されません。

私は間違っていますか？どのように私は私の目標を達成することができます。

それは、最終的なアイデアは、次のような何かを実行することであるのに役立ちます場合：

function directive(service) { 
    var vm = this; 
    vm.entity = null; 

    init(); 

    function init() { 
    service.getEntity(vm.theId).then(function (entity) { 
     vm.entity = entity; 
    }); 
    } 
} 

Answer 1

あなたが気づいてきたように、bindToControllerバインディングは（ある$scopeとは異なり、）コントローラのコンストラクタ関数ですぐに利用できません。あなたが探しているのは、角1.5で導入された機能です：ライフサイクルフック、特に$onInitです。

あなたは正しい考えを持っていました。

vm.$onInit = function() { 
    service.getEntity(vm.theId).then(function (entity) { 
     vm.entity = entity; 
    }); 
}; 

そしてhere is your updated fiddleを次のように単にあなたのinit関数定義と呼び出しを交換してください。 （また、この解決方法を使用しないと、watchが必要になります）

Answer 2

角度を使用すると、コントローラをバインドすることをお勧めします「あなたは他のディレクティブにAPIを公開する場合にのみ、それ以外の場合はリンクを使用しています。。」

ここでは、リンク機能を使用してfiddleの作業です。

angular.module('app', []) 
    .directive('directive', directive); 

angular.element(function() { 
    angular.bootstrap(document, ['app']); 
}); 

function directive() { 
    return { 
    restrict: 'E', 
    scope: { 
     theId: '<' 
    }, 
    template: ` 
     alsoId: <span ng-bind="alsoId"></span> 
     theId: <span ng-bind="theId"></span>`, 
    link: link 
    }; 
} 
function link(scope, element, attrs) { 

    init(); 

    function init() { 
    scope.alsoId = scope.theId; 
    } 
}