Question

我有一个<input>框作为搜索栏：

<input type="text" class="form-control input-lg" placeholder="Filter" ng-init="initSearch()" ng-model="search" ng-change="updateSearch()" id="search_bar">

并附有以下角度代码：

$scope.initSearch = function(){
  var searchParam = parseQueryString()["searchParam"];
  console.log(searchParam);

  if (searchParam !== undefined){
    var element = angular.element(document.querySelector('#search_bar'))[0];
    console.log(element);
    element.value = searchParam;
  }
};

$scope.updateSearch = function(){
   $location.search('searchParam',document.getElementById('search_bar').value);
};

用户必须能够输入已设置searchParam的网址，并且网页必须加载相应的数据。一旦我改变输入框的值，我怎么能让它实际反映它显示的数据中的输入？只有在手动输入搜索参数时才会更新。我还尝试在没有jQLite的情况下更改值，只使用了document.getElementById等

Answer 1

而不是看dom，为什么不像你这样使用实际的模型：

<input 
 type="text" 
 class="form-control input-lg" 
 placeholder="Filter" 
 ng-init="initSearch(search)" 
 ng-model="search" 
 ng-change="updateSearch(search)" 
 id="search_bar">

编辑：

扩展我的初始答案，您在页面加载时阅读Angular $ location params。我觉得你对ng-init感到有点困惑;这个指令只是给你一个方便的地方来绑定一些数据或运行一些函数 - 它不会特别影响这个元素的模型。因此，只需读取控制器中的位置并将其绑定到模型，并让模型将这些更改绑定到该位置，如下所示：

<div ng-controller="SearchCtrl as vm">
  <input type="text" 
     class="form-control input-lg" 
     placeholder="Filter"
     ng-model="vm.search" 
     ng-change="updateSearch(search)" 
     id="search_bar">
</div>

JS：

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

app.controller('SearchCtrl', function($location) {
  vm.search = $location.search().searchParam;
  vm.updateSearch = function() {
    $location.search('searchParam', vm.search);
  };

});

Answer 2

我最终通过创建一个直接在$setViewValue旁边使用ngModel的自定义指令来解决这个问题。这是我的指示。

app.directive('initSearch', function(){
  return {
     require: "?ngModel",

     link: function(scope, element, attrs, ngModel){
       var parseQueryString = function(){
         var str = window.location.search;
         var objURL = {};

         str.replace(
         new RegExp("([^?=&]+)(=([^&]*))?", "g" ),
         function($0,$1,$2,$3){
           objURL[$1] = $3;
         }
         );
       return objURL;
      };
      var searchParam = parseQueryString()["searchParam"];
      var searchBar = document.getElementById("searcher");

      if(searchParam!==undefined && searchBar.value ===''){
        ngModel.$setViewValue(searchParam);
        searchBar.value = searchParam;
      }

      scope.onChange = function(){
        ngModel.$setViewValue(scope.value);
      }
    }
  };
});

使用以角度更改值的输入进行搜索

2 个答案:

编辑：