Question

我正在尝试在click上呈现部分视图，其中包含控制器。

布局/索引页面：

<!DOCTYPE html>
<html lang="en" ng-app="AngularDemo">
    <head>
        ..
    </head>
    <body>
        <aside>
            <ul class="nav nav-list" ng-controller="Navigations as nav">
                <li class=""><a href="#" data-thisdiv="HomeDiv" ng-click="nav.showHomeDiv($event)">Home</a></li>
                <li class=""><a href="#" data-thisdiv="FedbackDiv" ng-click="nav.showFeedbackDiv($event)"> Feedbacks</a></li>
            </ul>
        </aside>
        <section id="MainBody"></section>
    </body>
</html>

controller.js

myApp.controller("Navigations", ["$compile", function ($compile) {
    var $this = this;
    this.showFeedbackDiv = function ($event) {
        var compiledeHTML = $compile("<div load-Div></div>")($this);
        $("#MainBody").append(compiledeHTML);
        $(".Division").hide();
        $("." + $(event.currentTarget).data("thisdiv")).show();

    };
}]).directive('loadDiv', function () {
    return {
        templateUrl: '/Default/GetFeedbackView',
        controller: 'Feedback'
    };
});

myApp.controller("Feedback", ['AngService', '$element', function(AngService, $element) {
    this.feedbackData = {};
    var $this = this;
    this.ShowFeedbacks = function () {
        AngService.ShowFeedbacks().then(function (response) {
            $this.allFeedbacks = JSON.parse(response.data);
            console.log($this.allFeedbacks);
            $("#ShowFeedbacksModal").modal({ backdrop: 'static', keyboard: false, show: true });
        }, function (response) {
            alert('Error in getting feedbacks');
        });
    };
}]);

部分视图：

<div class="Division FedbackDiv" style="margin-top:40px" ng-controller="Feedback as fb">
    <div class="page-header">
        <h1>
            Feedback form
            <span style="cursor:pointer;" class="pull-right" ng-click="fb.ShowFeedbacks()"><i class="fa fa-adn"></i></span>
        </h1>
    </div>
    <div class="row">
        ...
    </div>
</div>

当我点击“显示反馈”时，没有任何反应错误：

TypeError：a。$ new不是函数
          at g（angular.js：6970）
          在M（angular.js：7618）
          在angular.js：7854
          at angular.js：12914
          at h。$ eval（angular.js：14123）
          at h。$ digest（angular.js：13939）
          at h。$ apply（angular.js：14227）
          在p（angular.js：9493）
          在J（angular.js：9678）
          在XMLHttpRequest.t.onload（angular.js：9621）（匿名函数）@ angular.js：11358

Answer 1

删除ng-controller =“反馈为部分fb并添加控制器：fb到loadDiv config

.directive('loadDiv', function () {
  return {
    templateUrl: '/Default/GetFeedbackView',
    controller: 'Feedback',
    controllerAs : 'fb'
  };

Answer 2

应该在$ compile中传递$ scope; $ scope应注入控制器;如果你检查这个对象，它不是范围

而不是

    var compiledeHTML = $compile("<div load-Div></div>")($this);

试

    var compiledeHTML = $compile("<div load-Div></div>")($scope);

注入$ scope

    myApp.controller('Navigations', ['$compile', '$scope', function ($compile, $scope) { ... }])

ng-click（s）在局部视图中不起作用

2 个答案: