ng控制器在DOM準備好之後不會被Angular拾起

我們有一個應用程序，它是一些混合角和一些香草javascript。我們正在嘗試將它轉換爲角度。ng控制器在DOM準備好之後不會被Angular拾起

我們現在面臨的問題是，在應用程序的一部分中，HTML模板通過ajax調用被注入到DOM中。這個網站包含

ng-controller="MyController"

但角度不連線該控制器，當我們把一個的console.log在控制器上，它從來沒有來了。那麼，如果通過非角度代碼將其注入到DOM中，我們如何告知角度來查找此控制器。

來源

2016-01-20 ecorvo

它是如何注入的？我認爲你必須首先編譯它，以便角度知道waddup – devqon

問題是HTML被非角度代碼注入到DOM中。普通的jQuery ajax。所以這個HTML只是一個div與ng-controller =「MyController」 – ecorvo

只需$ html將它添加到DOM –

你會想要使用$compile允許角度爲dynamically compile這個HTML模板。 $watch將允許您在每次AJAX返回的字符串更改時編譯此模板。

HTML

<html ng-app="app"> 
    <body> 
    <h1>AJAX-provided HTML into Angular-rendered template</h1> 
    <div ng-controller="MyController"> 
     <div dynamic="html"></div> 
    </div> 
    </body> 
</html>

的JavaScript

var app = angular.module('app', []); 

app.directive('dynamic', function ($compile) { 
    return { 
    restrict: 'A', 
    replace: true, 
    link: function (scope, ele, attrs) { 
     scope.$watch(attrs.dynamic, function(html) { 
     ele.html(html); 
     $compile(ele.contents())(scope); 
     }); 
    } 
    }; 
}); 

function MyController($scope) { 
    $scope.updateHtml = function(html){ 
    $scope.html = ""; 
    } 
}

要強制jQuery來更新角度的代碼，你可以嘗試調用該DOM元素的角度對象（然後訪問控制器對於該對象）：

jQuery

$.ajax(href, { 
    success: function(data){ 
    var element = angular.element($('#myElement')); 
    var scope = element.scope(); 
    scope.$apply(function(){ 
     scope.updateHtml(data); 
    }); 
    } 
});

來源

2016-01-20 17:09:56 zacran

我的阿賈克斯是外角。我試圖在這個鏈接底部做這樣的事情，但它不工作... https://docs.angularjs.org/api/ng/function/angular.injector – ecorvo

我更新了執行一個角度範圍功能從外部角度。你也可以用'element.controller（）'創建一個ng-controller對象，以相同的方式執行控制器函數。 – zacran

ng控制器在DOM準備好之後不會被Angular拾起

回答

相關問題