Question

我对角度很新，请原谅我的简洁/无知。

我想要做的是在动态加载的angular中使用ASP.NET MVC partial view。所以我有一个带有按钮的页面，当点击该按钮时，我出去获取部分视图并将HTML注入该页面上的DIV。

在这个局部视图中，我想使用角度。我想要一个包含ng-controller="MainController as main"，一些{{main.Field1}}和{{main.Field2}}的div，以及一个将创建控制器并设置这些字段值的脚本。

问题是部分视图没有编译/解析/链接/ angular的任何内容，我的控制器方法永远不会被命中。

我在$compile()的搜索过程中看到了参考文献并使用了指令，但它们似乎涉及更复杂的模板和诸如此类的东西，而且我还遇到了一个简单易用的简单解决方案，用于我想要做的事情。有人可以提供吗？

Answer 1

您可以使用$compile服务，如下所示：

angular.module('application',[])
.controller("TestController", ['$scope', '$compile', function($scope, $compile){
    var self = this;    

    self.OnShowCompiledHTML = function(){
        var html = '<div data-ng-controller="OtherController as vm"><span>{{name}}</span><button data-ng-click="vm.OnShowFullName()">Show Full Name</button></div>';
        var templateElement = angular.element(html);
        var scope = $scope.$new(true);//pass in isolate as true as we dont need the parent scope
        scope.name = 'John';
        scope.surname='Doe';
        var clonedElement = $compile(templateElement)(scope, function(clonedElement, scope) {
            //attach the clone to DOM document at the right place            
            angular.element(document.querySelector('#container')).append(clonedElement);
       });
    };
}])
.controller("OtherController", ['$scope', function($scope){
    var self = this;    

    self.OnShowFullName = function(){
        alert('This is my fullName:' + $scope.name +' ' + $scope.surname);
    };
}])

您可以在https://jsfiddle.net/87h02o8r/

找到一个有效的例子

<强>解释

$compile接受一个元素和一个$scope的实例。要动态创建新范围，您可以使用$scope.$new(isolate, parent)方法。 $scope.$new(isolate, parent)有两个参数。

第一个参数指示是否要创建从父作用域继承的作用域，否则创建隔离作用域。

如果您创建一个继承当前范围的范围，则需要传入当前范围，例如$scope.$new(false, $scope);

由于现在符合HMTL，您可以正常使用OtherController;

如果您需要获取bootstrap Modals或任何其他部分HTML功能的未编译部分视图，这是一种注入编译HTML的方便方法。

您可以通过$http服务获取HTML，而不是像我一样对HTML进行硬编码。

使用角度和MVC部分视图

1 个答案: