使用角度和 MVC 局部视图 [关闭]

Question

我对 Angular 很陌生，所以请原谅我的简洁/无知。

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

在这个局部视图中，我想使用 angular。我想要一个带有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；

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

您无需像我那样对 HTML 进行硬编码，而是通过 $http 服务获取 HTML。