Javascript 如果单击，则无法访问其他范围中的变量_Javascript_Html_Angularjs_Angularjs Scope

Javascript 如果单击，则无法访问其他范围中的变量

javascript html angularjs

Javascript 如果单击，则无法访问其他范围中的变量,javascript,html,angularjs,angularjs-scope,Javascript,Html,Angularjs,Angularjs Scope,我对Javascript完全陌生，尤其是AngularJs。这是我的问题，我需要在ng repeat内部调用ng click函数，以在其外部隐藏一些html 据我所知，问题是因为所有变量（在本例中，具体为变量“位置”）都位于我无法访问的另一个范围内。有人能帮我找到解决这个问题的最短方法吗到目前为止，我几乎只用角度html标记完成了我的网站（这意味着我不需要编写任何自定义函数），这是绝对的最后一块另外，据我所知，每当创建angular中的新控制器时，它都有自己的作用域。在本例中，所有调用（除了

我对Javascript完全陌生，尤其是AngularJs。这是我的问题，我需要在ng repeat内部调用ng click函数，以在其外部隐藏一些html

据我所知，问题是因为所有变量（在本例中，具体为变量“位置”）都位于我无法访问的另一个范围内。有人能帮我找到解决这个问题的最短方法吗

到目前为止，我几乎只用角度html标记完成了我的网站（这意味着我不需要编写任何自定义函数），这是绝对的最后一块

另外，据我所知，每当创建angular中的新控制器时，它都有自己的作用域。在本例中，所有调用（除了我遇到问题的调用）都是在没有初始化任何控制器的情况下进行的，那么如何访问变量呢？是否存在类似“默认范围”的内容？我知道rootScope不适合我

先谢谢你

您必须围绕两个HTML片段创建一个控制器：

<div ng-controller="Ctrl">
    <!-- YOUR CODE HERE -->
</div>

然后绑定到内部

位置

：

<ul class="menu" ng-show="!viewState.locations">
</ul>
<ul class="menu" ng-show="viewState.locations">
</ul>
...
<a id="details" href="#/details" ng-click="viewState.locations = !viewState.locations">

...

这样做的原因，以及使用

$rootScope

不起作用的原因，是作用域如何通过Javascript的原型继承来继承其父对象的属性。大致地说，实际上很短：

当您从一个范围中读取一个属性，而该范围不包含该属性时，JS将查看其原型（同样粗略地说，是范围的父范围）。该链一直延伸到

$rootScope

。因此，将

位置

放入

$rootScope

将成功读取此属性

无论何时将变量写入作用域，它都会直接写入该作用域，无论从何处读取。因此，更改内部作用域中的

位置

对外部作用域没有影响（例如

$rootScope

）

将变量放入对象中会导致读取对象，该对象解析为正确的作用域，然后将属性写入正确的对象。

这就是我为拥有可访问的根作用域所做的

在app.run中设置Rootscope：（别忘了注入$Rootscope）

创建一个控制器，该控制器具有更改Rootscope的函数（$Rootscope也被注入）

这就是html：

    <html ng-app>
            {...}
    <body>
      <div id="main_sidebar">
        <ul class="menu" ng-show="!locations">
          <li>x1</li>
          <li>x2</li>
          <li>x3</li>
          <li>x4</li>
        </ul>
        <ul class="menu" ng-show="locations">
          <li>y1</li>
          <li>y2</li>
          <li>y3</li>
          <li>y4</li>
        </ul>
      </div>

      <div ng-click="locations =! locations">Change me (no Controller)</div>

      <div ng-controller="someCtrl">
        <ul>
          <li ng-repeat="post in travels">
            <div ng-bind="post.dest" ng-click="flipMenu()"></div>
          </li>
        </ul>
      </div>

    </body>

    </html>

您将在此处找到一个可用的Plunker：

不确定这是否是你想要的。但我希望这能有所帮助。

（不要因为以下原因对我大喊大叫，说这是对Angular Zen的反对：-）

这就是我最终使用的。这看起来非常简单，但可能也会帮助其他初学者。这基本上是使值在不同控制器中可访问的代码。如果我理解正确，这和尼科斯建议的一样

var myApp = angular.module('myApp',[]);

    myApp.value('Pages',{page:"My Profile"});
    myApp.value('Menu',{show:false});
    myApp.value('Menu2',{show2:false});

    myApp.controller('MainMenu', function($scope,Menu,Pages) {
        $scope.menu = Menu;
        $scope.pages = Pages;
    });

    myApp.controller('MainSidebar', function($scope,Menu,Menu2,Pages) {
        $scope.menu = Menu;
        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    });

    myApp.controller('SecondSidebar', function($scope,Menu,Menu2,Pages) {
        $scope.menu = Menu;
        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    });


    myApp.controller('TripsFx', function($scope,Menu2,Pages) {

        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    })

为什么rootscope不工作？你试过什么？我真的不知道。就好像这些变量根本不在rootScope中一样。谢谢。我有一种感觉，它会变成这样（因为我正在搜索更多关于它的信息），我只是不愿意这样做，因为这意味着我使用angular的方式本身是错误的。但再次感谢你。老实说，我不喜欢在视图中混合应用程序逻辑。我总是试图把逻辑和观点分开。谢谢你的帮助。我想我是用所谓的工厂解决了这个问题。：）问题是，使用$rootScope和创建具有可访问值的工厂的逻辑基本相同，所以我只是按照我所理解的更为传统的方式行事。：）我试图使用$rootScope，这样我就可以避免重写angular后面的整个逻辑，但无论如何我都必须这样做，所以我为我使用的所有块创建单独的控制器，并在需要的地方传递必要的值。但再次感谢您的努力：）

    var myApp = angular.module('ProGen', []);
    myApp.run(function($rootScope) {
      //setup Rootscope
      $rootScope.locations = false;
    })

    function someCtrl($rootScope, $scope) {
      $scope.travels = [
        {dest: 'Rome'},
        {dest: 'London'}
        ];

      $scope.flipMenu = function() {
        $rootScope.locations = !$rootScope.locations;
      }

    }

    <html ng-app>
            {...}
    <body>
      <div id="main_sidebar">
        <ul class="menu" ng-show="!locations">
          <li>x1</li>
          <li>x2</li>
          <li>x3</li>
          <li>x4</li>
        </ul>
        <ul class="menu" ng-show="locations">
          <li>y1</li>
          <li>y2</li>
          <li>y3</li>
          <li>y4</li>
        </ul>
      </div>

      <div ng-click="locations =! locations">Change me (no Controller)</div>

      <div ng-controller="someCtrl">
        <ul>
          <li ng-repeat="post in travels">
            <div ng-bind="post.dest" ng-click="flipMenu()"></div>
          </li>
        </ul>
      </div>

    </body>

    </html>

  var myApp = angular.module('ProGen', []);
  myApp.run(function($rootScope) {
    //setup Rootscope
    $rootScope.locations = false;
  })

function someCtrl($rootScope, $scope) {
  $scope.travels = [
    {dest: 'Rome'},
    {dest: 'London'}
    ];

  $scope.flipMenu = function() {
    $rootScope.locations = !$rootScope.locations;
  }
}

var myApp = angular.module('myApp',[]);

    myApp.value('Pages',{page:"My Profile"});
    myApp.value('Menu',{show:false});
    myApp.value('Menu2',{show2:false});

    myApp.controller('MainMenu', function($scope,Menu,Pages) {
        $scope.menu = Menu;
        $scope.pages = Pages;
    });

    myApp.controller('MainSidebar', function($scope,Menu,Menu2,Pages) {
        $scope.menu = Menu;
        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    });

    myApp.controller('SecondSidebar', function($scope,Menu,Menu2,Pages) {
        $scope.menu = Menu;
        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    });


    myApp.controller('TripsFx', function($scope,Menu2,Pages) {

        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    })