Angular: Bind NavBar partial html to controller variable

Question

I am having issues binding my search term in my nav bar to a controller variable as it must be out of scope. In my partial navbar hmtl, I am trying to use ng-model to bind the input value to my controller variable.

my (partial hmtl) navbar:

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

and my controller:

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

  $scope.keyword = "";


}])

and my view that I am including the partial html navbar in (and also trying unsuccessfully to print out the value in the search bar):

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

stephanec · Accepted Answer · 2016-02-18 01:25:56Z

1

you should just use an object. Instead of calling it keyword, call it nav.keyword . this will permit to share data with your ng-include, because it is two different stop that you are using

look at this plunker https://plnkr.co/edit/B6ZkcDnKvrl6Y5UeFZql?p=preview

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

answered Feb 18, 2016 at 1:25

stephanec

3251 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Bind NavBar partial html to controller variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related