Question

我想将每个表单的一些变量提交给我的角度应用。我得到了以下html设置：

<div class="page-header" align="center">
   <h1>The Mean Blog</h1>
  </div>

  <div ng-repeat="article in articles">
   <h3>{{ article.title }}</h3>
   <blockquote>{{ article.content }}</blockquote>

  <footer>
   <span class="glyphicon glyphicon-heart"
    ng-click="giveLike(article)"
    style="margin-right:5px;">
   </span>

   Likes: {{ article.likes }},

   <a href="#/articles/{{ article._id }}" style="color:black">
    <span class="glyphicon glyphicon-comment"
     style="margin-left:5px;">
    </span>
   </a>

   <span class="glyphicon glyphicon-trash"
    ng-click="deleteArticle(article)"
    style="margin-right:5px;margin-left:5px;">
   </span>

   <span class="glyphicon glyphicon-pencil"
    ng-click="edit_article = !edit_article">
   </span>
  </footer>

   <div ng-show="edit_article">
    <form style="margin-top:30px;">
     <h3>Edit this article!</h3>


    <div class="form-group">
     <input class="form-control"
      type="text"
      ng-model="title"
      ng-init="title=article.title">
     </input>
    </div>

    <div class="form-group">
     <textarea class="form-control"
      spellcheck="false"
      ng-model="content"
      ng-init="content=article.content">
     </textarea>
    </div>

     <button ng-click="updateArticle()" type="submit" class="btn btn-primary">Save</button>
    </form>
   </div>
  </div>

角度部分：

angular.module('meanBlog', ['ui.router'])

.config([
'$stateProvider', // Ein Router, der auf States basiert
'$urlRouterProvider', // Die einem State zugehörigen URLs werden zur Verfügung gestellt
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    // Homepage mit den Artikeln
    .state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'PrimaryController',
      // Promise wird ausgeführt bevor der Controller initialisiert wird
      resolve: {
        articlePromise: ['articlesFactory', function(articlesFactory) {
          return articlesFactory.retrieveArticles();
        }]
      }
    })
    // Genauere Ansicht der Artikel
    .state('articles', {
      url: '/articles/{id}', // Routen Parameter der dem Controller zur Verfügung steht
      templateUrl: '/articles.html',
      controller: 'ArticlesController',
      // Das Artikel Objekt wird samt Kommentaren geladen
      // und kann im ArticlesController injiziert werden
      resolve: {
        article: ['$stateParams', 'articlesFactory', function($stateParams, articlesFactory) {
          return articlesFactory.retrieveArticle($stateParams.id);
        }]
      }
    });
  // Falls eine undefinierte URL aufgerufen wird, wird das state 'home' benutzt
  $urlRouterProvider.otherwise('home');
}])

...

.factory('articlesFactory', ['$http', function($http) {
  // 'articles' beinhaltet alle Artikel. 'art' ist eine jedem Modul verfügbare Variable
  var art = {
    articles: []
  };

  art.updateArticle = function(article) {
    return $http.put('/articles/' + article._id + '/update', article);
  };
}

...

.controller('PrimaryController', [
'$scope',
'articlesFactory',
function($scope, articlesFactory) {

  $scope.articles = articlesFactory.articles;

  $scope.updateArticle = function() {
    console.log($scope.title);
    articlesFactory.updateArticle({
      _id: $scope.article._id,
      title: $scope.title,
      content: $scope.content,
    });
  };

不幸的是，当我控制日志$ scope.title时，我得到一个未定义的

Answer 1

为什么不利用Angular的用途？

控制器：

$scope.articles = articlesFactory.articles;

// other stuff

视图：

<div ng-repeat="article in articles">
    <form>
         <input class="form-control"
          type="text"
          ng-model="article.title" />

         <textarea class="form-control"
          spellcheck="false"
          ng-model="article.content">
         </textarea>

         <button ng-click="updateArticle(article)" type="submit" class="btn btn-primary">Save</button>
    </form>
</div>

updateArticle：

$scope.updateArticle = function(article) {
    articlesFactory.updateArticle({
      _id: article._id,
      title: article.title,
      content: article.content,
    });
    // or just articlesFactory.updateArticle(article);
  };

以角度提交表单时，undefined $ scope vars

1 个答案: