【问题标题】:how to bubble up the effect of changing the scope of a directive to its parents angular如何冒泡将指令范围更改为其父级的效果
【发布时间】: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


    【解决方案1】:

    我认为这是因为您的控制器 $scope.showNav 是一个原语,并且您遇到了此处描述的原型继承问题:https://github.com/angular/angular.js/wiki/Understanding-Scopes

    尝试使用具有 showNav 属性的对象。

    【讨论】:

    • 有人说我应该改用服务工厂来保持导航显示的状态。避免整个指令范围hoopala ..你同意吗?
    • 当我需要跨多个控制器持久化或共享属性及其值时,我通常采用这种方法。但是您仍然需要一个将服务属性绑定到模板的范围变量,并且该范围变量应该是一个具有属性的对象,而不仅仅是一个原语。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-21
    • 2010-12-07
    • 2015-09-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多