如何在 javascript 中调用控制器而不是 html Angular JS

Question

我正在做一个关于 Thinkster.io 的教程，其中涉及使用 Angular JS 编写一个简单的新闻应用程序。当我通过 ng-controller = "MainCtrl" 引用控制器 (MainCtrl) 时，我的代码工作正常，但教程说我应该能够在我的配置函数中执行此操作。这是我的代码。提前致谢

  var app = angular.module('flapperNews', ['ui.router']);

  app.factory('posts', [
    function() {
      var o = {
        posts: []
      };
      return o;
    }
  ]);

  app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: '/app/views/home.html',
          controller: 'MainCtrl'
        });

      $urlRouterProvider.otherwise('home');
    }
  ]);




  app.controller('MainCtrl', [
    '$scope',
    'posts',

    function($scope, posts) {
      $scope.posts = posts.posts;

      $scope.addPost = function() {
        console.log("adding post");
        if (!$scope.title || $scope.title === "") {
          return;
        }
        $scope.posts.push({
          title: $scope.title,
          link: $scope.link,
          upvotes: 0
        });
        $scope.title = "";
        $scope.link = "";
      }
      $scope.incrementVotes = function(post) {
        post.upvotes += 1;
      }
      $scope.decrementVotes = function(post) {
        post.upvotes -= 1;
      }
    }
  ]);

<!DOCTYPE html>
<html>

<head>
  <title>Flapper News</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../../public/css/style.css" rel="stylesheet" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <script type="text/javascript" src="../../app.js"></script>
</head>

<body ng-app="flapperNews">
  <div class="row">
    <div class="col-md-5 col-md-offset-3">
      <ui-view></ui-view>

      <div id="container">
        <div id="posts" ng-repeat="post in posts | orderBy: '-upvotes'">

          <a ng-show="post.link" href="{{post.link}}">
       {{post.title}}
      </a> 
          <span ng-hide="post.link">
       {{post.title}}
      </span>
          <span id="up" class="glyphicon glyphicon-thumbs-up" ng-click="incrementVotes(post)"></span>
          {{post.upvotes}}
          <span class="glyphicon glyphicon-thumbs-down" ng-click="decrementVotes(post)"></span>

        </div>
      </div>
      <div id="form">
        <form id="form-items" ng-submit="addPost()">
          <input type="text" placeholder="Title" ng-model="title"></input>
          </br>
          <input type="text" placeholder="Link" ng-model="link"></input>
          </br>
          <button class="btn btn-lg btn-primary" type="submit">Post</button>
        </form>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="/app/views/home.html">
    <div class="page-header">
      <h1>People News</h1>
    </div>
    <!-- rest of template -->
  </script>
</body>

</html>

Answer 1

这个plunker对你有用吗？将此 html 移至模板

<div id="container">
    <div id="posts" ng-repeat="post in posts | orderBy: '-upvotes'">

      <a ng-show="post.link" href="{{post.link}}">
                        {{post.title}}
                    </a> 
      <span ng-hide="post.link">
                        {{post.title}}
                    </span>
      <span id="up" class="glyphicon glyphicon-thumbs-up" ng-click="incrementVotes(post)"></span>
      {{post.upvotes}}
      <span class="glyphicon glyphicon-thumbs-down" ng-click="decrementVotes(post)"></span>

    </div>
  </div>
  <div id="form">
    <form id="form-items" ng-submit="addPost()">
      <input type="text" placeholder="Title" ng-model="title"></input>
      </br>
      <input type="text" placeholder="Link" ng-model="link"></input>
      </br>
      <button class="btn btn-lg btn-primary" type="submit">Post</button>
    </form>
  </div>

如何在 javascript 中调用控制器而不是 html Angular JS

How to call controller in javascript as opposed to html Angular JS

html

javascript

controllers

angularjs