在templateUrl覆蓋它之前檢索AngularJS僞指令的內部HTML

我有一個指令，我使用了我最近重構的表單驗證樣板。請允許我在擴展之前進一步解釋指令。在templateUrl覆蓋它之前檢索AngularJS僞指令的內部HTML

該指令的用法：

<form class="form-horizontal" name="personalDetails" validated-form> 

    <!-- Pass buttons into form through here --> 
    <a href="" class="btn btn-success" 
     data-ng-click="saveDetails()" 
     data-ng-disabled="!personalDetails.$valid">Save Changes</a> 

</form>

以前，我的指令看起來是這樣的，它工作。

app.directive('validatedForm', function($compile, $sce) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function(scope, element, attrs) { 

      var template = //... HTML boilerplate code 
      var buttons = element.html(); // Get contents of element before overriding 

      element.html(template + buttons); 
      $compile(element.contents())(scope); 

     } 
    } 
});

html模板變得凌亂了，我想將按鈕'模板'包裹起來，而不是在模板後面。所以我重構了我認爲更好的指令。

app.directive('validatedForm', ['$compile', '$sce', function ($compile, $sce) { 

    var domContent = null; 

    return { 
     restrict: 'AE', 
     scope: true, 
     templateUrl: '/Content/ngViews/directives/validated-form.html', 
     link: function(scope, element, attrs) { 

      // This now returns the contents of templateUrl 
      // instead of what the directive had as inner HTML 
      domContent = element.html(); 

      // Scope 
      scope.form = { 
       caption: attrs.caption, 
       location: 'Content/ngViews/forms/' + attrs.name + '.html', 
       buttons: $sce.trustAsHtml(domContent), 
       showButtons: !(domContent.replace(' ', '') === '') 
      }; 

     } 
    }; 
}]);

那麼我注意到的是，element.html（）現在檢索templateUrl的內容，而不是我的指令內的HTML內容。在我的指令的內容被templateUrl覆蓋之前，我還能如何獲得它的內容？

來源

2013-11-21 francisco.preller

要訪問iniital html，可以在指令控制器中使用$transclude。這是從早期版本的微小變化，從而假定使用1.2

controller:function($scope,$transclude){ 
     $transclude(function(clone,scope){ 
     /* for demo am converting to html string*/ 
     $scope.buttons=angular.element('<div>').append(clone).html(); 
     }); 

    }

DEMO

來源

2013-11-21 03:27:21 charlietfl

這不正是你說的是正確的答案，但作爲一個跟進 - 傳遞的HTML結合成通過ng-bind-html使用$ sce.trustAsHtml（）的templateUrl會混淆與範圍一起傳遞的點擊事件。這是否是由於指令中存在新的控制器？ –

不確定你是否使用這個說實話...只是從範圍傳遞的HTML不會被編譯。創建演示。總的來說，我對你在做什麼感到有些困惑......只是給你提供了一種按要求訪問html的方法。您可以使用plunker導入templateURL ...只需創建一個帶有html的文件並將url調整到相同的目錄（只是文件） – charlietfl

謝謝，將會破解它更長的時間。如果我發現問題是什麼，會發布更新。可能與我的代碼有關。就像我說的，這是對實際問題的正確答案，無論如何，謝謝！ –

在templateUrl覆蓋它之前檢索AngularJS僞指令的內部HTML

回答

相關問題