這有什麼代碼角定製指令中的問題 - 已解決

Question

'use strict'; 
angular.module('$praveen.directives').directive('pvTempUrl', 
    function ($http, $compile, $log) { 
     $log.info("Directive Called"); 
     return { 
      restrict: 'A', 
      replace:true, 
      compile: function (telement, tattr, transclude) { 
      var templateloader = $http.get('../../HelloTemp.html'). 
        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, controller) { 
        $log.info("Reached till return part"); 
        templateloader.then(function() { 
         var compiledHtm = $compile(telement.html())(scope).html(); 
         element.html(compiledHtm); 
        }); 

       } 
      } 
     }; 
    }); 

錯誤即將在該行需要var compiledHtm = $compile(telement.html()(scope)); 我們可以使用模板的URL，而不是直接編譯代碼的功能。

編輯：編輯$compile(telement.html())(scope).html();現在得到HTML編寫<input class="ng-pristine ng-valid" type="text" ng-model="txtData">{{ txtData }}
後，但仍，NG-模型不能正常工作，並顯示{{txtData}]這樣沒有錯誤的控制檯還。 在此先感謝。

發現問題我是有約束力的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()); 
        }); 
       }; 
      } 
     }; 
    }); 

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

Answer 1

這是否解決問題了嗎？

angular.module('$praveen.directives').directive('pvTempUrl', function($compile, $http, $log, $templateCache) { 
    $log.info("Directive Called"); 
    return { 
     restrict: 'A', 
     replace: true, 
     compile: function(tElement, tAttrs) { 
      var templateLoader = $http.get('../../HelloTemp.html', { 
       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, attrs) { 
       templateLoader.then(function(templateText) { 
        element.html($compile(tElement.html())(scope)); 
       }); 
      }; 
     } 
    }; 
}); 

我還加入了一些模板緩存。