ng-included 버튼을 클릭하십시오.

Question

문제가 있습니다. 내 index.html 페이지에 HTML 템플릿 페이지에있는 버튼을 포함 시키려고합니다. 나는 페이지가이

<ng-include src="'logout/logout.template.html'"></ng-include> 

처럼 수행

<button type="button" class="btn btn-default btn-sm" ng-click="$ctrl.lala()"> 
    <span class="glyphicon glyphicon-log-out" ></span> Log out 
</button> 

문제는, 문제는 작동하지 않습니다. ctrl 함수에 액세스하지 않습니다. 내가 읽었을 때 ng-include는 다른 각도 지시문과 잘 작동하지 않으므로 내 질문이 있습니다. 코드 템플릿을 복사하지 않고 index.html에 단추 템플릿을 포함시킬 수있는 방법은 무엇입니까? 그걸 깨뜨리지 마라.

componenent :

'use strict'; 
angular 
    .module('logout') 
    .component('logout', { 
     templateUrl: 'logout/logout.template.html', 
     controller: ['$scope', '$location', '$localStorage', 'Logout', 
      function LogoutController($scope, $location, $localStorage, Logout) { 


       this.lala = function() { 
        console.log("doing logout"); 
       } 
      } 

     ] 
    }); 

Answer 1

나는 잔인한 같은 소리로 들리 겠지만 난 그냥 또 다른 구성 요소를 만들 것입니다. lala()가 실제로 사용자를 로그 아웃하는 함수라면, 컴포넌트에이를 포함시키는 것이 가장 좋습니다. 따라서 모든 부모 컴포넌트에서이를 반복하지 않아도됩니다.

완전한 샘플을 보려면 jsfiddle을보십시오. 나는 HTML에서 모든 것을 썼다, 그러나 나는 아래의 중요한 부분을 복사 : 그것은`NG-include`가 새 자식 범위를 생성하는 나의 이해는 https://jsfiddle.net/6cjd5ggq/1/

<logout></logout> 

angular.module('logoutapp') 
    .controller('logoutController', logoutController) 
    .component('logout', { 
     // you can use templateUrl, but it's easier this way in jsfiddle 
     template: `<button type="button" class="btn btn-default btn-sm" ng-click="$ctrl.lala()"> 
        <span class="glyphicon glyphicon-log-out"></span> Log out 
       </button>`, 
     controller: 'logoutController' 
}); 

function logoutController() { 
    this.lala = function() { 
    alert("logout!"); 
    }; 
}