0

コードの例を見て、必要な機能を満たすように編集しました。

http://jsfiddle.net/infnadanada/abr5h5we/で見ることができます

問題は、「uiwidget」ディレクティブで 2 つ (またはそれ以上) のオブジェクトを初期化すると、2 つのオブジェクトが最後に渡された値を返すことです。

これを修正する方法、または属性 (+ ご覧のとおり他の属性) を使用して $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>

角度のある

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: 私は Angular を初めて使用し、下手な英語で申し訳ありません:D ありがとう!

4

1 に答える 1

0

scope:true を yr ディレクティブに追加するだけです...

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

于 2015-01-21T15:49:23.783 に答える