PartialView中的angularjs控制器不工作

我有一个视图，其中包含一个调用PartialView的链接

<div data-ng-controller="MainController">
    <a href="#" data-ng-click=callPartialView()">
        Click here to see the details.
    </a>
</div>

<script>
    app.controller('MainController', ['$scope', 'HttpService', 
        function($scope, HttpService) {

        $scope.callPartialView = function() {
            HttpService.getModal('/Controller/ShowModalMethod', {});
        };
    }]);
</script>

局部视图正完美地显示出来。当我尝试向PartialView内容添加控制器时，就会出现问题

<div class="wrapper" data-ng-controller="PartialViewController">
    <span data-ng-bind="description"></span>
</div>

<script>
    alert('This alert is shown.');
    app.controller('PartialViewController', ['$scope', 'HttpService', 
        function($scope, HttpService) {

        $scope.description = "That's the content must have to appear in that bind above, but it isn't working properly.";
    }]);
</script>

警报（“显示此警报”）；
app.controller（'PartialViewController'，['$scope'，'HttpService'，
功能（$scope，HttpService）{
$scope.description=“这就是内容必须出现在上面的绑定中，但它不能正常工作。”；
}]);

控制器无法按预期工作。我在控制器中放入的所有项都显示在上面的div中。发生了什么事？谢谢大家!

停止使用jQuery

问题是

$（'.modal'）.html（结果）

只是将HTML添加到具有

.modal

类的内容中。您需要做的是使用AngularJS编译模板，类似于：

app.factory('HttpService', function($document, $compile, $rootScope, $templateCache, $http) {

    var body = $document.find('body');

    return {
        getModal: function (url, data) {

            // A new scope for the modal using the passed data
            var scope = $rootScope.$new();
            angular.extend(scope, data);

            // Caching the template for future calls
            var template = $http.get(url, {cache: $templateCache})
                .then(function (response) {

                    // Wrapping the template with some extra markup
                    var modal = angular.element([
                        '<div class="modal">',
                        '<div class="bg"></div>',
                        '<div class="win">',
                        '<a href="#" class="icon cross"></a>',
                        '<div>' + response.data + '</div>',
                        '</div>',
                        '</div>'
                    ].join(''));

                    // The important part
                    $compile(modal)(scope);
                    // Adding the modal to the body
                    body.append(modal);

                    // A close method
                    scope.close = function () {

                        modal.remove();
                        scope.destroy();
                    };
                });
        }
    };
});

app.factory（'HttpService'，函数（$document、$compile、$rootScope、$templateCache、$http）{
var body=$document.find（'body'）；
返回{
getModal:函数（url、数据）{
//使用传递的数据创建模式的新范围
var scope=$rootScope.$new（）；
角度扩展（范围、数据）；
//缓存模板以备将来调用
var template=$http.get（url，{cache:$templateCache}）
.然后（功能（响应）{
//用一些额外的标记包装模板
var modal=角度元素([
'',
'',
'',
'',
''+response.data+''，
'',
''
].加入（“”）；
//重要部分
$compile（模态）（范围）；
//将模态添加到主体
body.append（模态）；
//封闭方法
scope.close=函数（）{
modal.remove（）；
scope.destroy（）；
};
});
}
};
});

工作示例

---

谢谢，我将查看此代码，然后回来告诉您结果！

app.factory('HttpService', function($document, $compile, $rootScope, $templateCache, $http) {

    var body = $document.find('body');

    return {
        getModal: function (url, data) {

            // A new scope for the modal using the passed data
            var scope = $rootScope.$new();
            angular.extend(scope, data);

            // Caching the template for future calls
            var template = $http.get(url, {cache: $templateCache})
                .then(function (response) {

                    // Wrapping the template with some extra markup
                    var modal = angular.element([
                        '<div class="modal">',
                        '<div class="bg"></div>',
                        '<div class="win">',
                        '<a href="#" class="icon cross"></a>',
                        '<div>' + response.data + '</div>',
                        '</div>',
                        '</div>'
                    ].join(''));

                    // The important part
                    $compile(modal)(scope);
                    // Adding the modal to the body
                    body.append(modal);

                    // A close method
                    scope.close = function () {

                        modal.remove();
                        scope.destroy();
                    };
                });
        }
    };
});