AngularJS - ディレクティブのTemplateUrlで約束を使用するファクトリメソッドの解決済みの値

Question

非常にモジュール化されたプロジェクトに取り組んでいますが、現在をビルドしています。ユーザlogin/logoutに基づいてtemplateUrlを変更します。

Factory's FunctionをtemplateUrlに実行しようとしています。その特定の関数はJWT Factoryから別のメソッドを呼び出し、ユーザーがログに記録されている場合はtrue、そうでない場合はfalseを返します。

templateUrl私はtrueを受け取っていますが、urlを選択します。falseもう1つです。

[$http:badreq] Http request configuration url must be a string. Received: {}

すべて$log.log()プリント正しい結果：

はしかし、悲しいことに、私は次のエラーを受け取ります。

それは表示されませんもちろん

、またpage1もpage2

指令

(function() { 
    'use strict'; 

    angular 
    .module('myApp') 
    .directive('myDirective', ['SessionCheckerFactory', function (SessionCheckerFactory) { 

     return { 
     restrict: 'E', 
     templateUrl : function(){ 
      return SessionCheckerService.checkSession().then(function (res) { 
      console.log(res);//true 
      return res ? 'app/page1.html' : 'app/page2.html'; 
     }); 
     }, 
     controller  : 'MyController', 
     controllerAs  : 'myCtrl', 
     bindToController : true 

     }; 
    }]); 
})(); 

SessionCheckerFactory

(function() { 
    'use strict'; 

    angular 
    .module('myApp') 
    .factory('SessionCheckerFactory', function (AuthTokenFactory) { 

     function checkSession() { 
      return AuthTokenFactory.isAuth(); 
     }   

     return { 
     checkSession: checkSession 
     } 

    }); 
})(); 

AuthTokenFactory

(function() { 
    'use strict'; 

    angular.module('myApp') 
    .factory('AuthTokenFactory', function AuthTokenFactory(store, $cookies) { 

     //Takes user's info from LocalStorage, if not empty returns a String with encoded string informations 
     function getToken() { 
     if (store.get(key)) { 
     return store.get(key); 
     } 
     //Takes user's info from cookie 
     var token = $cookies.get('token', {path: '/'}); 
     store.set(key, token); 

     return token; 
     } 

     //If getToken is empty returns false, else true 
     function isAuth() { 
     return Promise.resolve(Boolean(getToken())); 
     } 

     return { 
       isAuth : isAuth, 
       getToken : getToken 
     } 
}); 
})(); 

私は、この問題は通常、$httpリクエストによって生成されていることを周りに読んで、それは私の場合ではありません。これまでのところ私はそれに対する解決策を見つけられませんでした。

どうすればこの問題を解決できますか？

ありがとうございます。

Answer 1

をしたいです私はlink機能を使用して問題を修正するために管理し、$templateRequest

指令

link: function (scope, element) { 
     SessionCheckerService.renderTemplate().then(function (temp){ 
     $templateRequest(temp).then(function (requestedTemplate) { 
      element.html(requestedTemplate); 
      $compile(element.contents())(scope); 
     }); 
     }); 
    } 

工場

var templateConfig = './app/config/templates.config.json'; 

function getTemplate(){ 
    return $http.get(templateConfig) 
    .then(function(templates) { 
     return templates.data; 
    }); 
} 

function checkSession() { 
    return Promise.resolve(AuthTokenFactory.isAuth()); 
} 

function whichTemplate(template, result) { 
    var myTemplate = ''; 
    if(result){ 
    myTemplate = template.logIn; 
    } else { 
    myTemplate = template.logOut; 
    } 
    if(myTemplate){ 
     return Promise.resolve(myTemplate); 
    } 

} 

//Chaining the methods and returning the correct template 
function renderTemplate() { 
    return new Promise(function (resolve) { 
    checkSession().then(function(isAuth){ 
     getTemplate().then(function(templates){ 
     whichTemplate(templates, isAuth).then(function (temp) { 
      return resolve(temp); 
     }); 
     }); 
    }); 
    }); 
} 

return { 
    renderTemplate : renderTemplate 
} 

テンプレートコンフィグ

{ 
    "logOut" : "app/page1.html", 
    "logIn" : "app/page2.html" 
} 

私はそれが参考になるでしょう願っています。

Answer 2

Then, If in my templateUrl I receive true, I pick a certain url, if false another one.

実際にはありません。あなたがtrueを受け取った場合、あなたはいくつかのtruthy値、別のURL場合、1つのURLを選択し、何かがfalsy、あなたが任意の URL選択しない場合：

if (res) { 
    if (res === true) { 
     return resolve('app/page1.html'); 
    } // else 
     return resolve('app/page2.html'); 
} 
// else return undefined; 

をあなたはおそらく

templateUrl : function(){ 
    return SessionCheckerFactory.checkSession().then(function (res) { 
     if (res) { 
      return 'app/page1.html'; 
     } else { 
      return 'app/page2.html'; 
     } 
    }) 
},