Question

我对AngularJS很新，但我必须开发一个搜索标签，打印$http.get JSON。

我的逻辑是将ng-model附加$watcher并打印数据。

我做得对吗？还有其他建议可以做得更好吗？

下面我粘贴代码：

discover.js

var discover = angular.module('app.discover', ['discover.factory']);

discover.controller('getDiscover', [ '$scope', 'img', 'search', function ($scope, img, search) {

  var data = this;

  $scope.$watch('searchStr', function (substring) {
    if (substring && substring.length > 1) {
      search.getJSON(substring).then(function (response) {
        data.stories = response.stories;
        data.tags = response.tags;
        data.users = response.users;
      });
    }
  });
}]);

_discover.html

<div style="padding-top:50px;">
  <article>
    <section>
      {{my.stories}}
      {{my.tags}}
      {{my.users}}
    </section>
  </article>
</div>

修改

调查更多我错误地理解了我将要尝试解释的真正问题。

.state('discover', {
   url: "/discover",
   views: {
      'header': { templateUrl: "app/Topbar/_topbarDiscover.html", controller: 'getDiscover', controllerAs: 'my' },
      'content': { templateUrl: "app/Discover/_discover.html", controller: 'getDiscover', controllerAs: 'my' },
      'footer': { templateUrl: "app/Navbar/_navbar.html", controller: 'NavbarController', controllerAs: 'my' }
   }
});

这里的主要问题是我明白写同一个controller意味着我对2 controller使用相同的ui-views，但事实是第一个controller正在调用该操作，因此它是具有数据的顶栏controller: getDiscover。

Answer 1

另一种方法是使用关联数组来保存对象文字，以确定需要打印的内容

$scope.print = {stories: '', tags: '', users: ''};

您可以在此处使用$watch，因为它会监控模型$scope.searchStr中的任何更改。请记住，即使单个字符进入模型，也会调用此函数。您可以从angularJS API文档中查看ng-blur作为替代方法。

$scope.$watch('searchStr', function (substring) {
    if (substring && substring.length > 1) {
      search.getJSON(substring).then(function (response) {
        //parse Json
        var parsedData = JSON.parse(response.data);

        $scope.print.stories = parsedData.stories;
        $scope.print.tags = parsedData.tags;
        $scope.print.users = parsedData.users;
      });
    }
});

使用$http，$resource的服务以response.data的形式返回有效内容。由于您的服务返回JSON，因此您需要在将其打印到视图上之前对其进行解析。

<div style="padding-top:50px;">
  <article>
    <section>
      {{print.stories}}
      {{print.tags}}
      {{print.users}}
    </section>
  </article>
</div>

从$ watch输入打印数据

1 个答案: