Angularjs 数据绑定消失 - 静默失败 - angularjs data binding disappearing- Failing silently 小贝子编程网

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

简单的数据模型，如$scope.对话列表 = [123456];使用ng-bind和在指令模板中使用它都可以正常工作。

但是当我将它们更改为 {{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>'
    }
});

索引.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>

应用.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>

你需要定义你想要访问的元素 -替换 - {{conversationList.conversation}}带 - {{conversationList.conversation.id}}或{{conversationList.conversation.messageId}}

Angularjs 数据绑定消失 - 静默失败

相关内容

最新更新

热门标签：