Question

我无法在控制器中创建复杂的数据模型。每次我创建它们时，代码似乎都会无声地失败

简单的数据模型 $ scope.conversationList = [123456]; 使用ng-bind＆amp; amp;在指令模板中使用它。

但是当我将它们更改为{{conversationList.conversation}}时，它们会无声地失败并且我的ngbind被清空并且模板显示 “{{conversationList.conversataion}}”以纯文本形式出现。

我不知道出了什么问题。我能找到的每个例子看起来都像我正确地格式化模型一样，它会一直失败。

感谢您的帮助

控制器

/* global angular */
'use strict';


app.controller('conversationListCtrl', ['$scope', function ($scope) {

    $scope.conversationList = [
         {
             conversation2: 123456789,
             conversation:
                 {
                     id: "bestbuy",
                     messageId: 123456,
                     subscriber: "Billy Madison",
                     subscriptionType: "summerPass",
                     conversationImage: "insert Image"
                 }
         }
    ]
}
])

.directive('listCtrl', function () {

    return {
        scope: false,
        template: '<div> {{conversationList.conversation}} </div>'
    }
});

的index.html

<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
  <meta charset="utf-8">

  <title>ClearKey Test Message</title>
  <meta name="description" content="Layer Angular example">

  <link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">

  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  <!-- Common CSS and Identity dialog -->
  <link href="common/style.css" rel="stylesheet">


  <!-- Layer Web SDK -->
  <script src='vendors/layer-websdk.min.js'></script>

  <script src='vendors/angular.js'>
      //checked
  </script>
  <script src='vendors/angular-route.js'> 

  </script>

  <script src='vendors/ng-infinite-scroll.min.js'></script>
  <script src='vendors/stop-angular-overrides.js'></script>
  <!-- Angular app -->
    <script src='js/app.js'></script>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="js/models/conversation.js"></script>


</head>

<body class="ng-scope" cz-shortcut-listen="true">
    <!-- ^^^used to have appCtrl^^^ -->
    <div class="main-app" ng-include="'views/app.html'"></div>


</body>
</html>

App.html

<div src="jquery-3.1.1.min.js">
    <!-- ^^^needs appctrl controller^^^ -->
    <div class="messenger">
        <div class="left-panel">
            <div class="Message-item">
               <div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>

            </div>

            <div >
                <!-- ^^^had the conversationListCtrl^^^ -->
                <div class="panel-header conversations-header"
                     >
                <!-- ^^^had the partials for the left column header^^^ -->
                </div>
                <div ng-controller="conversationListCtrl" class="conversation-list">
                  <div list-Ctrl ></div>
                  <div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>  

                </div>
                <!-- had the partials for conversationlist.html -->
            </div>
        </div>
        <div class="right-panel" >
            <div 

                 >
                <!-- had the partials for the messages that were in each conversation -->
            </div> 
        </div>
    </div>
</div>

Answer 1

您需要定义要访问的元素 - 替换 - {{conversationList.conversation}} 使用 - {{conversationList.conversation.id}}或{{conversationList.conversation.messageId}}

angularjs数据绑定消失 - 无声地失败

1 个答案: