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

【问题标题】：Angular: Bind NavBar partial html to controller variableAngular：将 NavBar 部分 html 绑定到控制器变量
【发布时间】：2016-02-18 01:16:14
【问题描述】：

我在将导航栏中的搜索词绑定到控制器变量时遇到问题，因为它必须超出范围。在我的部分导航栏 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 导航栏（并且还尝试在搜索栏中打印出值但未成功）：

<!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>

【问题讨论】：

标签： html angularjs twitter-bootstrap

【解决方案1】：

你应该只使用一个对象。与其称它为关键字，不如称它为 nav.keyword 。这将允许与您的 ng-include 共享数据，因为您使用的是两个不同的站点

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

app.controller('MainCtrl', function($scope) {
  $scope.nav = {
    keyword: ''
  }
});

【讨论】：