Question

我遇到了将导航栏中的搜索词绑定到控制器变量的问题，因为它必须超出范围。在我的部分导航栏hmtl中，我试图使用ng-model将输入值绑定到我的控制器变量。

我的（部分hmtl）导航栏：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Company Title </a>
    </div>

    <div class="navbar-right">
      <form class="navbar-form" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" align="right" ng-model="keyword">
        </div>
        <button type="submit" class="btn btn-default" align="right">Submit</button>
      <a class="btn btn-default" href="advanced-search.html">Advanced Search</a>
      </form>
    </div>
  </div>
</nav>

和我的控制员：

app.controller('NavBarController', ['$scope',
  function($scope) {

  $scope.keyword = "";


}])

我的观点是我将部分html导航栏包括在内（并且还尝试在搜索栏中打印出来的值不成功）：

＆＃13;

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <script
    	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    
    <script
    	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <script src="csv-import.controller.js"></script>
    <script src="nav-bar.controller.js"></script>
    
    <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    
    <body ng-app=gcImageApp>
    <div ng-controller="NavBarController">
    	<div> 
     		 <div ng-include src="'navbar.html'"></div>
    	</div>		
    		{{keyword}}
    		<br>
    		<br>
    		<form ng-controller="CsvImportController">
    			<input type="file" file-input="files" multiple />
    			<button ng-click="upload()">Upload File</button>
    			<li ng-repeat="file in files"> Name: {{file.name}}  &nbsp Size: {{file.size / 1000}} KB</li>
    		</form>
    
    	</div>
    </body>

＆＃13;

Answer 1

你应该只使用一个对象。不要将其称为关键字，而是将其命名为nav.keyword。这将允许与您的ng-include共享数据，因为它是您正在使用的两个不同的停止

看看这个plunker https://plnkr.co/edit/B6ZkcDnKvrl6Y5UeFZql?p=preview

String hostName = request.getServerName().toString();
Integer urlPort = request.getServerPort();

if((urlPort != null) && (urlPort.intValue() != 80) && (urlPort.intValue() != 443) && (urlPort.intValue() != -1)) {
    hostName += ":" + urlPort;
}

Angular：将NavBar部分html绑定到控制器变量

1 个答案: