Partial View не се компилира правилно в angular

// Code goes here
var mymodule = angular.module('myapp', []);
mymodule.controller('mycontroller', function ($scope) {

});

mymodule.directive('pvTempUrl',
    function ($http, $compile, $log, $templateCache) {
        $log.info("Directive Called");
        return {
            restrict: 'A',
            replace: true,
            compile: function (telement, tattr, transclude) {
                var templateloader = $http.get(tattr.pvTempUrl, { cache: $templateCache }).
                    success(function (data) {
                        $log.info("Success-" + data);
                        telement.html(data);
                    }).
                    error(function (data, status) {
                        $log.warn("Error occured - " + data + " status-" + status);
                    });
                return function (scope, element, attr) {
                    templateloader.then(function () {
                        var compiledHtm = ($compile(telement.html())(scope)).html();
                        $log.info("compiled html-" + compiledHtm);
                        element.html(compiledHtm);
                    });
                }; 
            }
        };
    });

Имам частична страница, която се опитва да компилира, страницата работи, показвайки само шаблона като такъв.

Plunkr е наличен тук

http://plnkr.co/edit/U85rmXhuQGKx5pkzUu99?p=preview

Открит проблем, обвързвах html, а не компилирания обект, разреши проблема, както е показано по-долу

// Code goes here
var mymodule = angular.module('myapp', []);
mymodule.controller('mycontroller', function ($scope) {

});

mymodule.directive('pvTempUrl',
    function ($http, $compile, $log, $templateCache) {
        $log.info("Directive Called");
        return {
            restrict: 'A',
            replace: true,
            compile: function (telement, tattr, transclude) {
                var templateloader = $http.get(tattr.pvTempUrl, { cache: $templateCache }).
                    success(function (data) {
                        $log.info("Success-" + data);
                        telement.html(data);
                    }).
                    error(function (data, status) {
                        $log.warn("Error occured - " + data + " status-" + status);
                    });
                return function (scope, element, attr) {
                    templateloader.then(function () {
                        var compiledHtm = ($compile(telement.html())(scope));
                        $log.info("compiled html-" + compiledHtm);
                        //element.html(compiledHtm);
                        element.replaceWith(compiledHtm);
                         $log.info(element.html());
                    });
                }; 
            }
        };
    });

javascript angularjs partial-views directive
person Praveen Verma    schedule 03.07.2013    source източник
comment
как реши това? моля, публикувайте решението за нас   -  person prismaticorb    schedule 17.07.2013
comment
решение присъства в plunkr.   -  person Praveen Verma    schedule 18.07.2013

Отговори (1)


arrow_upward
0
arrow_downward

Не съм виждал някой да се опитва да зареди шаблон по този начин преди. Правилните Angular начини за зареждане на шаблон са следните:

  • Използване на ng-view за зареждане на предварително дефиниран шаблонен файл.
  • Изграждане на ваша собствена персонализирана директива.

Имам чувството, че се опитвате да използвате втория метод. Следният примерен код е пример как да направите това.

angular.module("myapp")
.directive('buttonsRadio', function() {
return {
    restrict: 'E',
    scope: false,
    controller: function($scope){
        //Any logic required for directive to work.    
    },
    templateUrl: 'template.html'
};
})

Във вашия файл template.html ще имате своя шаблон, който искате да заредите.

За много повече подробности и примери как да създадете свои собствени персонализирани елементи на директива, вижте раздела Писане на директиви (дълга версия) в документите на Angular.

АКТУАЛИЗАЦИЯ: Редактирано, за да покаже пример за templateUrl.

person John Woodruff    schedule 03.07.2013
comment
имам нужда от пример за templateUrl в персонализирана директива вместо шаблон (твърдо кодиран HTML) - person Praveen Verma; 03.07.2013
comment
благодаря jbw91, вече съм наясно с това, но моето изискване е, че трябва да заредя шаблона според url url ще бъде част от директивата. ‹buttons-Radio temp-Url=template.html›‹/buttons-Radio› като това. - person Praveen Verma; 03.07.2013