【问题标题】:How to change the scope in Angular in a view which you are not yet in.如何在您尚未进入的视图中更改 Angular 中的范围。
【发布时间】:2015-01-29 06:45:49
【问题描述】:

我已经多次问过这个问题,但没有得到太多帮助。所以我现在问是否可以将范围内的值更改为您不在的视图中的控制器。当我提到视图时,我指的是不同的 HTML 页面。

可以说,我在视图 1 中,即 view1.html。该视图有两个按钮,按钮 1 和按钮 2。如果单击按钮 1,将出现一个新视图; view2.html 包含一个粗体文本字段,例如 {{test}} 。当我单击 button1 时,我希望 $scope.test 为“button1”。同样,当我单击按钮 2 时,我希望打开相同的视图(view2.html),但这次我希望范围为“button2”而不是“button1”。

我想要这个的原因是为了避免创建很多 html 页面,因为一段时间后我会有很多不同的值。例如,如果我在第一页 (view1.html) 上有 10 个按钮,我不想创建 10 个 html 页面以便为您单击的每个按钮设置不同的值。我想要 1 个 html 页面,可以根据单击的按钮显示不同的值。我正在使用 Appgyver Supersonic(类固醇)将其开发为应用程序。

我曾尝试显示和隐藏不同的粗体标签,但始终无法做到。正如您可能猜到的那样,我是 Angular 的菜鸟,但我从来没有收到一个直截了当的答案,它在实践中有效,即使我尝试了多少。所以请帮忙,给我看一个简单的例子,你创建两个html页面和一个js。文件,以及如何从第一个 html 页面转到第二个页面,并且仍然根据我在第一个视图中的选择显示不同的值。谢谢!下面是我想要实现的示例代码,但在此示例中,当我单击按钮时范围不会更新,它保持不变。

示例代码

view1.html

<div ng-controller="IndexController">
<button class="button button-block button-assertive" ng-click="button1()" value="checkitems" >
  Button1
</button>
<button class="button button-block button-assertive" ng-click="button2()" value="checkitems" >
  Button2
</button>
</div>

索引控制器.js

angular
  .module('legeApp')
  .controller('IndexController', function($scope, supersonic, $filter) {  

$scope.test = 'test';

 $scope.button1= function(){   

     $scope.test= 'button1';

        var view = new supersonic.ui.View("legeApp#view2.html");
        var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
        supersonic.ui.layers.push(view, { animation: customAnimation });
    };

 $scope.button2= function(){   

     $scope.test= 'button2';

        var view = new supersonic.ui.View("legeApp#view2.html");
        var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
        supersonic.ui.layers.push(view, { animation: customAnimation });
    };
});

View2.html

<div ng-controller="IndexController">
<div class="card">
  <div class="item item-text-wrap">
    Test<b>{{test}} </b>
  </div>
</div>
    </div>

【问题讨论】:

标签: javascript angularjs angularjs-scope steroids


【解决方案1】:

您可以使用$rootScope.$emit$rootScope.$on 来处理不同$scopecontroller 之间的通信。

angular
  .module('legeApp')
  .controller('IndexController', function($scope, $rootScope, supersonic, $filter) {
    $scope.button1= function(){   
       $rootScope.$emit('myCustomEvent', 'Data to send');
    };

  })
  .controller('IndexController2', function($scope, $rootScope, supersonic, $filter) {
    $rootScope.$on('myCustomEvent', function (event, data) {
      console.log(data); // 'Data to send'
    });
  });

【讨论】:

  • 能否请您展示一个包含两个不同 html 文件的示例。我无法让它工作
  • @ThomasM.Tveten 看来您在这两个不同的视图中使用相同的控制器,我们可以为不同的视图使用不同的控制器吗?
  • 是的,没问题。假设 view2.html 有 ng-controller="IndexController2"。
  • @ThomasM.Tveten 检查一下。我已经用示例代码更新了。
  • @ThomasM.Tveten 检查这个demo,然后你就可以知道如何在不同的电子邮件之间发送消息了。
【解决方案2】:

您也可以使用该服务。

服务提供全局变量,可以将服务注入不同的控制器。

【讨论】:

    猜你喜欢
    • 2017-01-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-19
    相关资源
    最近更新 更多