asp.net - 使用 Angular 和 MVC 分部 View

Question

<分区>

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) 有两个参数。

第一个参数表示您是否要创建一个从父范围继承的范围，如果不是，您正在创建独立的范围。

如果创建一个继承当前作用域的作用域，则需要传入当前作用域eg $scope.$new(false, $scope);

因为 HMTL 现在已兼容，您可以正常使用 OtherController；

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

不像我那样对 HTML 进行硬编码，您将通过 $http 服务获取 HTML。