하나의 지시문이있는 AngularJs 다중 템플릿 뷰

Question

코드 예제를보고 필요한 기능을 수행하도록 편집했습니다.

당신은 문제가 "uiwidget"지시문에 의해 두 개 이상의 개체를 초기화 할 때 두 객체가 전달 된 마지막 값을 반환한다는 것입니다 http://jsfiddle.net/infnadanada/abr5h5we/

에서 볼 수 있습니다.

이 문제를 해결할 수있는 방법이나 다른 속성을 사용하여 $ templateCache에 지시문을 전달할 수있는 다른 코드가 있습니까?

HTML

<div ng-controller='MainCtrl'> 
    <uiwidget template="templates.button" class="btn btn-primary" text="asdt"></uiwidget> 
    <uiwidget template="templates.button" class="btn btn-danger" text="yooo"></uiwidget> 
</div> 

ANGULAR

var myApp = angular.module('myApp',[]); 

myApp.run(function($templateCache) { 
    $templateCache.put('button', '<button class="{{class}}">{{text}}</button>'); 
}); 

myApp.controller('MainCtrl', function($scope, $timeout) { 
    $scope.templates = 
    { 
     button: 'button' 
    }; 
}); 

myApp.directive("uiwidget", ["$compile", '$http', '$templateCache', function ($compile, $http, $templateCache) { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      scope.text = attrs.text; 
      scope.class = attrs.class; 
      scope.$watch(attrs.template, function (value) { 
       if (value) { 
        loadTemplate(value); 
       } 
      }); 
      function loadTemplate(template) { 
       $http.get(template, { cache: $templateCache }) 
       .success(function(templateContent) { 
        element.replaceWith($compile(templateContent)(scope));     
       });  
      } 
     } 
    } 
}]); 

PD : 내가 각도 내 나쁜 영어 죄송 새로운 해요 : D 감사합니다!

myApp.directive("uiwidget", ["$compile", '$http', '$templateCache',    function ($compile, $http, $templateCache) { 
    return { 
     restrict: 'E', 
     scope:true, 
     link: function(scope, element, attrs) { 
      scope.text = attrs.text; 
      scope.class = attrs.class; 
      scope.$watch(attrs.template, function (value) { 
      if (value) { 
       loadTemplate(value); 
      } 
      }); 

      function loadTemplate(template) { 
       $http.get(template, { cache: $templateCache }) 
       .success(function(templateContent) { 
        element.replaceWith($compile(templateContent)(scope));     
       });  
      } 
     } 
    } 
}]); 

여기 범위에 대한 자세한 내용을 읽어 보시기 년 지침에 충실 : https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 1

그냥 범위를 추가