Question

<div id="Some-div" data-ng-controller="SomeController">
</div>

angularModule.controller("SomeController", ["$scope", "$http", function ($scope, $http) {
    $scope.someFunction = function myfunction() {

    }    
}]);

当我们使用getAngularControllerScope($('#Some-div'));获取范围时，方法someFunction()可以访问，并且可以像getAngularControllerScope($('#Some-div')).someFunction()一样调用

但是当通过ajax调用

加载相同的div时

getAngularControllerScope($('#Some-div'));没有可用的方法。请帮忙。

加载html

$http.post('/SomeController/MyPartialAction', { data: "value" }).success(function (response) {
//load the partial view HTML in the div
$("#MyDiv").html(response);        
});

Answer 1

Angular不会编译直接放入DOM的html内容。为了使它处理指令，例如ng-controller，您需要显式编译它。这样的事情应该有效：

newScope = $scope.$new();     // for a new child scope
newScope = $scope.$new(true); // for a new isolate scope
newScope = $scope;            // for an existing scope

$compile(insertedDomElement)(newScope);

或者您可以使用ng-include：

$scope.template = '<div id="Some-div" data-ng-controller="SomeController</div>';

<html><body>
  <ng-include src="template"></ng-include>
</body></html>

比照。 AngularJS How to dynamically add HTML and bind to controller

Answer 2

您需要编译元素以将其附加到当前范围

为此，将$compile服务注入控制器，

将HTML字符串或DOM编译成模板并生成模板函数，然后可以将其用于将范围和模板链接在一起

angularModule.controller("SomeController", ["$scope", "$http", "$compile", function  ($scope, $http, $compile) {
    $scope.someFunction = function myfunction() {

    }    
}]);

在ajax之后编译并附加html，比如

$http.post('/SomeController/MyPartialAction', {data:"value"}).success(function(response) {
    //compile against the $scope here,
    var compiledElm = $compile(response)($scope);
    $("#MyDiv").html(compiledElm);        
});

<强>更新

如果您真的无法使用$routes来实现此目标，那么您可以这样做，但最好的方法是使用$routes。

将#MyDiv包装在div中并为该div分配controller，就像我已放ParentCtrl

<div ng-controller="ParentCtrl">
    <button ng-click="getHtml()">attach html</button>
    <div id="MyDiv"></div>
</div>

并在ParentCtrl中执行html内容附件。如下

app.controller('ParentCtrl', function($scope, $timeout, $compile) {
    $scope.getHtml = function() {
        $timeout(function() {
            var html = '<div id="Some-div" data-ng-controller="SomeController">{{ name }}</div>';
            var compiled = $compile(html)($scope);
            $("#MyDiv").html(compiled);
        }, 1000);
     };
}

这是一个DEMO

获取动态加载元素的Angular范围方法

但是当通过ajax调用

加载html

2 个答案: