如何冒泡将指令范围更改为其父角度的效果

Question

This is coming from a total angular.js noob.

basically this is what this prototype site looks like:

the idea is that the nav search bar is should be hidden upon initial page load.. and only the home search bar should show. as soon as the user enters something in the home search bar.. it should load the results on the map, make the home search bar disappear and the nav search bar appear

i read a lot about angular directives.. and how directives can adopt its parent scopes etc, and how you can make isolate scopes and pick and choose which of the parent scopes you like to inherit

so this is what my jade/html looks like:

body(ng-controller='AppCtrl')
  div(ng-view)

  .container
    .top_nav_bar
      a.logo
      a.menu_button
    secondary_nav(ng-show="showNav", show-nav="showNav")

    div(ng-controller="ListingsCtrl")
      home_search(ng-controller="SearchCtrl",ng-show="showHomeSearch", show-home-search="showHomeSearch", show-nav="showNav")

inside controllers :

.controller('AppCtrl', 
  ..
  $scope.showNav = true

.controller('ListingsCtrl'
  ..
  showHomeSearch: true

inside directives:

.directive('secondaryNav',()->
  restrict: 'AEC'
  templateUrl: '/partials/secondary_nav.html'
  scope:
    showNav: '='
)

.directive('homeSearch', ->
    scope:
      map: '='
      showHomeSearch: '='
      showNav: '='
    restrict: 'AEC'
    replace: false
    templateUrl: '/partials/home_search.html'
    link: (scope, elem, attrs) ->
      search_button = elem.find('.button')
      search_button.bind "click", ->
        scope.$apply ()->
          scope.showHomeSearch = false
          scope.showNav = true
])

basically home search inherits the value of showHomeSearch from its parent controller/scope (and it's set to true).. so when i click on the search button.. its value turns to false and the home search indeed disappears.

as for the nav search bar .. if i set $scope.showNav to false in the AppCtrl , it indeed disappears. but then clicking on the search button doesnt make it appear. Even though if I put a breakpoint on scope.showNav = true in the homeSearch directive, I can see that the value of scope.showNav is false and it changes to true.. but then nothing happens.

any help? even if you show me a completely different way of doing the whole thing!

Answer 1

I think it's because your controller $scope.showNav is a primitive and your running into the prototypal inheritance gotcha described here: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Try using an object with a property of showNav instead.