【发布时间】:2014-08-01 19:11:04
【问题描述】:
这来自一个总的 angular.js 菜鸟。
这个原型网站基本上是这样的:
这个想法是导航搜索栏应该在初始页面加载时隐藏......并且只有主页搜索栏应该显示。一旦用户在主页搜索栏中输入内容..它应该在地图上加载结果,使主页搜索栏消失并出现导航搜索栏
我阅读了很多关于 angular 指令的内容......以及指令如何采用其父作用域等,以及如何制作隔离作用域并挑选您喜欢继承的父作用域
这就是我的玉/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 并且主页搜索确实消失了.
至于nav search bar.. 如果我在AppCtrl 中将$scope.showNav 设置为false,它确实会消失。但是然后单击搜索按钮不会使其出现。即使我在homeSearch 指令中的scope.showNav = true 上设置了一个断点,我也可以看到scope.showNav 的值是false 并且它更改为true.. 但是没有任何反应。
有什么帮助吗?即使你向我展示了一种完全不同的方式来完成整个事情!
【问题讨论】:
标签: javascript jquery html css angularjs