Question

我正在尝试添加一些功能，以便在单击url标记时将searchBar注入主视图。首先，我将发布＆＃34; index.html＆＃34;文件：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
  </head>
  <body ng-app="myApp">
    <div class="container" ng-controller="AppController">
      <div class="page-header">
        <h1>A checklist</h1>
      <div>
      <a href="#search" >Search</a>
      </div>
       <div ng-view></div>
      <div class="alert alert-info" role="alert" ng-hide="items &amp;&amp; items.length > 0">
        There are no items yet.
      </div>
      <form class="form-horizontal" role="form" ng-submit="addItem(newItem)">
        <div class="form-group" ng-repeat="item in items">
          <div class="checkbox col-xs-9">
            <label>
              <input type="checkbox" ng-model="item.checked" ng-change="updateItem(item)"/> {{item.description}}
            </label>
          </div>
          <div class="col-xs-3">
            <button class="pull-right btn btn-danger" type="button" title="Delete"
              ng-click="deleteItem(item)">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </div>
        <hr />
        <div class="input-group">
          <input type="text" class="form-control" ng-model="newItem" placeholder="Enter the description..." />
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit" ng-disabled="!newItem" title="Add">
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </span>
        </div>
      </form>
    </div>
    </div>
        <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
   <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-resource.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.min.js"></script>
    <script type="text/javascript" src="./app/app.js"></script>
    <script type="text/javascript" src="./controllers/AppController.js"></script>
    <script type="text/javascript" src="./controllers/SearchController.js"></script>
    <script type="text/javascript" src="./services/ItemFactory.js"></script>
    <script type="text/javascript" src="./routing/route.js"></script>
  </body>
</html>

我有＆＃34; routing.js＆＃34;文件下一个：

        angular.module("myApp").config(function($routeProvider) {
          $routeProvider  
          .when('/search', {
              templateUrl: 'views/search.html',
              controller: 'SearchController'
          })

          .otherwise({
              redirectTo: '/'
          });
     });

这是＆＃34; search.html＆＃34;视图：

    <div class="jumbotron text-center">
<div>{{ searchText }}</div>
</div>

这是SearchController：

angular.module('controllerModule').controller('SearchController',function($scope){
$scope.searchText = "I can haz cheezeburger";
    });

所以，从理论上讲，我可以将搜索文本页面注入＆＃34; index.html＆＃34;页。

所以这是我的问题：

由于某些原因，我的代码不起作用;可能是我发布的代码或者我找不到的程序的其他部分的一些语法错误。谁能告诉我可能是什么问题？如果有人要求，我可以发布项目的其余部分。
理想情况下，我想最终注入搜索栏而不是字符串;任何人都可以给我一些关于如何做到这一点的反馈

以下是项目的其他组件：

＆＃34; ItemFactory.js＆＃34;

    angular.module("serviceModule").factory("Item", ['$resource', function($resource) {
    return $resource('/items/:id', {
        id: '@id'
      }, {
        update: {
          method: "PUT"
        },
        remove: {
          method: "DELETE"
        }
      });
    }]);

这是＆＃34; app.js＆＃34;。

angular.module("controllerModule", []);
angular.module("serviceModule", []);
angular.module("myApp", ["ngResource", "ngRoute", "controllerModule", "serviceModule"]);

这是＆＃34; AppController.js＆＃34;。我已将此发布在我的另一个问题帖子上。

    angular.module("controllerModule").controller("AppController", ['$scope', 'Item', function($scope, Item){
    Item.query(function(response) {
        $scope.items = response ? response : [];
    });

    $scope.addItem = function(description) {
        new Item({
            description: description,
            checked: false
        }).$save(function(item) {
            $scope.items.push(item);
        });
        $scope.newItem = "";
    };

    $scope.updateItem = function(item) {
        item.$update();
    };

    $scope.deleteItem = function(item) {
        item.$remove(function() {
            $scope.items.splice($scope.items.indexOf(item), 1);
        });
    };
}]);

AngularJS：将searchBar视图注入主视图

0 个答案: