0

我想要做的是点击好友列表中的好友后，加载一个聊天对话框模板 HTML 文件，而不会干扰当前 DOM 中的其他元素，就像在 facebook 中聊天一样。

我的问题是加载 html 模板文件后，范围变量（例如 {{contact.jid}}）没有正确呈现，甚至没有调用对话框的控制器。

如何强制重新渲染或调用控制器，以便正确渲染这些变量？或者我不应该使用 jQuery.load 函数来做到这一点？我想不出任何其他方法。

谢谢你。

控制器代码： 

// Controller for the chat dialog
ctrl.controller('ChatCtrl',function($scope){
    $scope.test = "Test"
});

// Controller for the buddy list
// $scope.toggleDialog is called when a buddy is clicked
ctrl.controller('ContactCtrl',function($scope){
    $scope.contacts = window.contactList;
    $scope.toggleDialog = function(to){
        $.("#chatarea").load("chatdialog.html")
    };
});

加载具有 ng-controller 属性的 chatdialog.html 后不会调用聊天对话框的控制器函数，因此未设置 {{test}} 变量。

4

3 回答 3

0

您正在通过 jQuery 加载外部 HTML，而 Angular 无法知道如何使用它。有两种方法可以解决这个问题：

  1. 使用ngInclude从服务器加载模板，angular 将从服务器加载并编译它供您使用。
  2. 继续使用 jQuery 从服务器加载 HTML 并使用$compile服务来教Angular 如何使用它

我强烈建议使用方法 #1 来加载您的外部模板。

于 2014-04-07T17:09:17.950 回答
0

您需要包装将在指令中编译的内容。

该指令接收将被编译的变量和 HTML。您可以将此指令包装在您喜欢的元素中：

http://plnkr.co/edit/RYVCrlDmgVXT3LszQ9vn?p=preview

例如，给定以下 html 和变量：

// In the controller
$scope.controllerHtml = '<span>{{variables.myVariable}}</span>';
$scope.controllerVariables = {myVariable: 'hello world'};

<!--In the HTML-->
<div compile-me html-to-bind="controllerHtml" variables="controllerVariables"></div>

您将获得以下信息：

<div>
    <span>hello world</span>
</div>
于 2014-04-07T17:28:00.830 回答
0

我想：

$.("#chatarea").load("chatdialog.html")

是 jQuery .load 或类似的东西。我会通过 ngInclude 获取模板，检查是否设置了测试；html:

<div id="chatarea" ng-if="test">
  <div ng-include="'chatdialog.html'"/>
</div>

控制器：

ctrl.controller('ContactCtrl',function($scope){
    $scope.contacts = window.contactList;
    $scope.test = '';
    var callbackFunction = function(data) {
      $scope.test = data.test;
    };
    $scope.toggleDialog = function(to){
      AjaxRequestToGetBuddyInfoAndMessages(to, callbackFunction);
    };
});

显然test将是一个更复杂的对象，因此ngIf测试会有所不同（您需要考虑以下事实：

$scope.test = data.test

如果它们是对象，它们将失去引用并具有不需要的行为）。

于 2014-04-07T17:32:10.953 回答