Javascript 如何将指令的范围更改为其父指令的效果

Javascript 如何将指令的范围更改为其父指令的效果,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,这是一个完整的angular.js noob 基本上这就是这个原型站点的样子: 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")

这是一个完整的angular.js noob

基本上这就是这个原型站点的样子:

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

想法是导航搜索栏应该在初始页面加载时隐藏。。并且只有主页搜索栏应该显示。一旦用户在主页搜索栏中输入内容。。它应该将结果加载到地图上,使主页搜索栏消失,导航搜索栏出现

我读了很多关于角度指令的书。。指令如何采用其父作用域等,以及如何创建隔离作用域并选择要继承的父作用域

这就是我的jade/html的样子:

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")
内部控制器

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

.controller('ListingsCtrl'
  ..
  showHomeSearch: true
内部指令:

.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
])
基本上,
home search
从其父控制器/作用域继承
showHomeSearch
的值(并将其设置为true)。。所以当我点击搜索按钮时。。它的值变为false,家庭搜索确实消失了

至于
导航搜索栏
。。如果我在
AppCtrl
中将
$scope.showNav
设置为
false
,它确实会消失。但是点击搜索按钮并不能让它出现。即使我在
homeSearch
指令中的
scope.showNav=true
上放置了一个断点,我也可以看到
scope.showNav
的值是
false
,并且它会变为true。。但是什么也没发生


有什么帮助吗?即使你向我展示了一种完全不同的方式

我认为这是因为您的控制器$scope.showNav是一个原语,您运行到了这里描述的原型继承:


尝试改用属性为showNav的对象。

有些人说我应该改用服务工厂来保持nav显示与否的状态。。避免整个指令范围。。你同意吗?当我需要在多个控制器之间持久化或共享属性及其值时,我通常采用这种方法。但是您仍然需要一个将服务属性绑定到模板的范围变量,并且该范围变量应该是一个具有属性的对象,而不仅仅是一个原语。