Question

我正在构建新闻应用。用户可以从他们的主页发布不同类型的新闻。主页

<uib-tabset active="active">
  <uib-tab index="0" heading="All News">
    <news-feed poststype="1" username="userName"></news-feed>
  </uib-tab>
  <uib-tab index="1" heading="Internation">
    <news-feed poststype="3" username="userName"></news-feed>
  </uib-tab>
  <uib-tab index="2" heading="Regional">
    <news-feed poststype="7" username="userName"></news-feed>
  </uib-tab>
</uib-tabset>

新闻Feed是我在主页上注入的指令。

这是视图:(新闻Feed视图）

<div class="post-textarea">
  <textarea class="form-control" ng-model="vm.currentPost.content"></textarea>
  <a class="btn btn-primary" ng-click="vm.addPost(vm.currentPost.content)">Post</a>
</div>

<div class="clearfix"></div>
<div>
  <ul class="media-list">
    <li class="media post" ng-repeat="post in vm.posts">
      <div class="post-main">
        <div class="post-content">{{post.content}}</div>
      </div>
    </li>
  </ul>
</div>

它有一个文本区域，用户可以使用该文本区域发布新的新闻更新。但是当用户发布它时，它会反映在所有三个新闻源中。因为用户可以为新闻帖子设置多个类别，我在此不包括降低复杂性。

但它没有反映在所有三个标签中。

这是我的控制器（新闻提要控制器）：

(function() {
  angular
    .module('myApp.newsFeed', [])

  .factory('newsFeedService', function($http) {
    var baseUrl = 'api/';

    return {

      postCurrentPost: function(newPost) {
        var dataPost = {
          newPost: newPost
        };
        return $http({
          method: 'post',
          url: baseUrl + 'postCurrentPost',
          data: dataPost,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });
      }
    };
  })

  .directive('newsFeed', function() {
    var controller = function($routeParams, newsFeedService, $scope, focus) {
      var vm = this;

      // Add a news post
      vm.addPost = function(newPost) {
        var currentPost = vm.currentPost;
        currentPost.created_at = new Date();
        currentPost.content = ""; //clear post textarea
        if (newPost) {
          newsFeedService.postCurrentPost(newPost).success(function(data) {
            vm.posts = data;
          });
        }
      };

    };

    var template = '<button>{{vm.poststype}}</button>';

    return {
      restrict: 'E',
      scope: {
        poststype: '@',
        username: '='
      },
      controller: controller,
      controllerAs: 'vm',
      bindToController: true, //required in 1.3+ with controllerAs
      templateUrl: 'app/newsFeed.html'
        //template: template
    };
  });
})();

但我目前的设置仅在一个标签中显示。或者用户必须重新加载页面。有没有办法在所有3个标签中反映出新的变化？

我的PHP代码（后端）如下所示：

function postCurrentPost()
{

    $requestData = json_decode(file_get_contents("php://input"));

    $newPost = $requestData->newPost;
    $content=validate_input($newPost);

   //code to save it to db comes here

   //fetch all news; I have functions returning international and regional news
   //how can I handle it in angular view
    $data=getAllPosts();
    return $data;
}

function getAllPosts()
{
  //returns all news
}

function international()
{
  //returns international news
}

function regional()
{
  //returns regional news
}

由于它是我注入主页的指令，并且所有三个标签共享相同的页面代码，我该怎么做？

Answer 1

由于您想要共享一个模型，您可以为主视图创建一个控制器并定义我刚刚命名为newsData的模型：

首页控制器

.controller('MainCtrl', function() {
  var vm = this;
  vm.newsData = [{
    id: 1,
    type: 1,
    content: 'first post'
  }];
});

此模型将通过名为news-data

的属性传递到您的指令中

首页

<body ng-controller="MainCtrl as main">
  <uib-tabset active="active">
    <uib-tab index="0" heading="All News">
      <news-feed poststype="1" username="userName" news-data="main.newsData"></news-feed>
    </uib-tab>
    <uib-tab index="1" heading="Internation">
      <news-feed poststype="3" username="userName" news-data="main.newsData"></news-feed>
    </uib-tab>
    <uib-tab index="2" heading="Regional">
    <news-feed poststype="7" username="userName" news-data="main.newsData"></news-feed>
    </uib-tab>
  </uib-tabset>
</body>

现在你想在指令控制器中共享的任何东西，包括newsData数组，都需要通过bindToController而不是指令的隔离范围传递

newsFeed指令

return {
  restrict: 'E',
  scope: {
    username: '='
  },
  controller: controller,
  controllerAs: 'vm',
  bindToController: {
    poststype: '@',
    newsData: '='
  }, //required in 1.3+ with controllerAs
  templateUrl: 'app/newsFeed.html'
    //template: template
};

现在在您的指令控制器中，您可以访问共享成员，包括newsData

newsFeed指令控制器

  vm.addPost = function(newPost) {
    var currentPost = vm.currentPost;
    currentPost.created_at = new Date();
    currentPost.content = ""; //clear post textarea
    console.log(vm);
    if (newPost) {
      var postToAdd = {
        type: vm.poststype,
        content: newPost
      };
      newsFeedService.postCurrentPost(postToAdd).then(function(data) {
        vm.newsData = data;
      });
    }
  };

所以有解释，但是here它正在发挥作用。

AngularJS：在控制器和视图中处理多个响应

1 个答案: