NG綁定，html和NG-控制器

我不安全注射進入的HTML一些<div>，像這樣：NG綁定，html和NG-控制器

<div class="category-wrapper" ng-bind-html="content"></div>

這個網站有angularjs 「代碼」（$scope.content裝載有這樣的事情）：

請注意，這段代碼有ng-controller。 GiveUsController在嵌入式html（不在頭部）的同時被延遲加載。這個控制器沒有錯誤，因爲它已經被測試過了。

angular.module("tf").controller('GiveUsController', function ($scope, $http)  
{ 
    console.debug("GiveUsController loaded"); 
    $scope.variable1 = "hi!"; 
}

沒有控制檯調試也不variable1分配

它看起來像沒有控制器綁定到<div>：作爲

我控制器一樣簡單。

我不知道我怎麼能與角器注入HTML並使其工作...

任何想法？

來源

2015-09-29 MrViSiOn

角是自舉一次，所以如果您嘗試添加成分已經自舉後可能不會，雖然我工作不知道如何重新加載它們（如果你可以的話）。 –

爲了給出更好的答案，我建議你在StackOverflow或Plunker/JSFiddle的代碼編輯器中創建一個測試 – Enkode

AS @ExplosionPills注意到，你的問題可能與angularJs引導有關。你可以手動引導，在這裏看到更多：https://docs.angularjs.org/api/ng/function/angular.bootstrap –

你可以做一些你想要的手動html編譯。這是一種基本上是$compile service的指令包裝的方法。觀察下面的例子和使用......

<div class="category-wrapper" ng-html="content"></div>

.controller('ctrl', function($scope) { 
    $scope.content = '<div class="giveus-wrapper" ng-controller="GiveUsController">{{variable1}}</div>' 
}) 
.controller('GiveUsController', function($scope) { 

    console.log('hello from GiveUsController') 
    $scope.variable1 = 'I am variable 1' 
}) 
.directive('ngHtml', ['$compile', function ($compile) { 
    return function (scope, elem, attrs) { 
     if (attrs.ngHtml) { 
      elem.html(scope.$eval(attrs.ngHtml)); 
      $compile(elem.contents())(scope); 
     } 
     scope.$watch(attrs.ngHtml, function (newValue, oldValue) { 
      if (newValue && newValue !== oldValue) { 
       elem.html(newValue); 
       $compile(elem.contents())(scope); 
      } 
     }); 
    }; 
}]);

JSFiddle Link - 演示

來源

2015-09-29 16:26:03 scniro

@MrVision我編輯了我的答案，以更貼近你的問題。你可以檢查一下，看看這是否適合你？我懷疑是你正在加載的JavaScript。你可以在你的網頁上包括這個，而不是在這個動態的電話中？ – scniro

非常感謝！這對我來說是解決方案！只有一件事：我必須替換elem.html（newValue）;爲elem.html（newValue.toString（））;一切順利！謝謝！ – MrViSiOn

你必須編譯HTML內容，我得到這個使用指令：

.directive('comunBindHtml', ['$compile', function ($compile) { 
     return function(scope, element, attrs) { 
      scope.$watch(
      function(scope) { 
       // watch the 'compile' expression for changes 
       return scope.$eval(attrs.compile); 
      }, 
      function(value) { 
       // when the 'compile' expression changes 
       // assign it into the current DOM 
       element.html(value); 

       // compile the new DOM and link it to the current 
       // scope. 
       // NOTE: we only compile .childNodes so that 
       // we don't get into infinite loop compiling ourselves 
       $compile(element.contents())(scope); 
      } 
     ); 
     }; 
    }])

希望它有幫助:)

來源

2015-09-29 16:26:13

只是供參考，這與我之後發佈的回答基本相同 – scniro

我嘗試了你們給我的所有解決方案（謝謝！），但沒有獲勝。我將把這個問題寫入一些小提琴...並編輯我的帖子 – MrViSiOn

我不記得從哪裏，但這個答案是從另一個堆棧文章複製。你應該鏈接源代碼而不是複製它們。 – C0ZEN

Angular本身不綁定添加到DOM中的ng指令。

的$ sce.compile或$編譯幫助的角度看哪些元素被添加到實際的DOM，還使用了$編譯你必須使用一個指令。

應該是這樣的：

var m = angular.module(...); 

m.directive('directiveName', function factory(injectables) { 
    return = { 
    priority: 0, 
    template: '<div></div>', // or // function(tElement, tAttrs) { ... }, 
    transclude: false, 
    restrict: 'A', 
    templateNamespace: 'html', 
    scope: false, 
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }, 
    controllerAs: 'stringIdentifier', 
    bindToController: false, 
    require: 'siblingDirectiveName', 'optionalDirectiveName', '?^optionalParent'], 
    compile: function compile(tElement, tAttrs, transclude) { 
     return { 
     pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 
     post: function postLink(scope, iElement, iAttrs, controller) { ... } 
     } 
    }, 

    }; 
});

並在您想要

$compileProvider.directive('compile', function($compile) { 
     return function(scope, element, attrs) { 
     scope.$watch(
      function(scope) { 
      return scope.$eval(attrs.compile); 
      }, 
      function(value) { 
      element.html(value); 
      $compile(element.contents())(scope); 
      } 
     ); 
     };

來源

2015-09-29 16:38:43 davesnx

NG綁定，html和NG-控制器

回答

相關問題