Angularjs不在nodejs中工作

below is my angular js html file and i am accessing using http://localhost:3000/modulename/create the problem is angularjs is not working like for instance the ng repeat is empty in template-ing whereas when we console the object in javascript it return values please refer highlighted section in below screenshot for reference purposes

下面是我的角度js html文件，我正在访问使用http：// localhost：3000 / modulename / create问题是angularjs不能正常工作，例如ng重复在模板中是空的，而当我们在javascript中控制对象时返回值请参考下面屏幕截图中的突出显示部分以供参考

angular app.js

    angular.module('scotchTodo', ['todoController']);


 angular.module('todoController', [])

    // inject the Todo service factory into our controller


    .controller('ContactController', ['$scope','$http', function($scope, $http, Todos) {


        $scope.contacts = [
        {id:0, 'name': 'PremAseem', 'email':'hello@gmail.com', 'phone': '123-2343-44'}
    ];
    console.log($scope.contacts)


    }]);

angular html code

角html代码

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
  <!-- META -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

  <title>Node/Angular Todo App</title>

  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
  <style>
    html          { overflow-y:scroll; }
    body          { padding-top:50px; }
    #todo-list        { margin-bottom:30px; }
    #todo-form        { margin-bottom:50px; }
  </style>

  <!-- SPELLS -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script><!-- load angular -->


  <script src="../../admin/js/app.js"></script>  <!--load up our controller -->

</head>
<!-- SET THE CONTROLLER -->
<body >
<div  ng-controller="ContactController">
    <form class="well">
    <label>Name</label> 
        <input type="text" name="name" ng-model="newcontact.name"/>
    <label>Email</label> 
        <input type="text" name="email" ng-model="newcontact.email"/>
    <label>Phone</label> 
        <input type="text" name="phone" ng-model="newcontact.phone"/>
        <br/>
        <input type="hidden" ng-model="newcontact.id" />
     <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary"/>
    </form>
<table class="table table-striped table-bordered">
<thead> 
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
    <td>{{ contact.name }}</td>
    <td>{{ contact.email }}</td>
    <td>{{ contact.phone }}</td>
    <td>
        <a  href="#" ng-click="edit(contact.id)">edit</a> | 
        <a href="#" ng-click="delete(contact.id)">delete</a>
    </td>
 </tr>
</tbody>
</table>    
</div>






</body>
</html>

3 个解决方案

#1

The problem was with consolidate templating. Thanks @nirmal for issue deduction. The solution was to change angularjs templating.

问题在于整合模板。谢谢@nirmal的扣除问题。解决方案是改变angularjs模板。

app.js:

app.js：

var app = angular.module('scotch', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[{');
    $interpolateProvider.endSymbol('}]');
})

#2

Issue because of your view engine used in nodejs/express https://www.npmjs.com/package/consolidate
Basically most of the server side/client side view engines used the {{ data }} pattern for templating, in your code your bindings are truncated by your view engine.
Html Response of your /api call giving the HTML snippets with out your actual binding you made in your code.

由于您在nodejs / express中使用的视图引擎问题https://www.npmjs.com/package/consolidate基本上大多数服务器端/客户端视图引擎使用{{data}}模式进行模板化，在您的代码中绑定被视图引擎截断。 Html对/ api调用的响应，为HTML代码片段提供您在代码中实际绑定的代码。

(1)
    If you move you modulename.html, app.js inside public folder and if you access the same through node server. It works as expected.
    You can try this.
    Compare the response HTML snippets for below two cases from Browser Network Tab,
        1. /api
        2. /modulename.html  // after placing modulename.html in public folder
(2)
    For any problem in Javascript frameworks, browser console is our best friend. You can navigate to console and access scope object of element you can get the "contacts" object.
    Or you can bind you contacts object model to any text box using ng-model, or ng-bind directives.
    you can get your contacts value in html.

(3)
    If you want to still use view engine in server side, even though you have master piece angular in browser. You can choose ng-bind directive for you angularjs template.
    It's always better approach to use ng-bind directive in our templates, instead of {{}} pattern.

Hope this helps you on the issue. Please feel free to ping me, if not resolved.

#3

Try this

尝试这个

angular.module('scotchTodo', ['todoController']);


angular.module('todoController', [])

  // inject the Todo service factory into our controller


  .controller('ContactController', ['$scope','$http', function($scope, $http, Todos) {
      scope.contacts = [];
      var data = {id:0, 'name': 'PremAseem', 'email':'hello@gmail.com', 'phone': '123-2343-44'};
      $scope.contacts.push(data);
  console.log($scope.contacts)


  }]);

#1