如何在您尚未进入的视图中更改Angular的范围。

时间:2015-01-29 06:45:50

标签: javascript angularjs angularjs-scope steroids

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

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

我之所以想要这样做是为了避免创建很多html页面,因为我会在一段时间后拥有许多不同的值。例如,如果我在第一页上有10个按钮(view1.html),我不想创建10个html页面,以便为您单击的每个按钮设置不同的值。我希望有1个html页面可以显示不同的值,具体取决于单击的按钮。我正在使用Appgyver Supersonic(Steroids)将其开发为app。

我试图显示和隐藏不同的粗体标签,但永远无法做到。正如你可能猜到的那样,我是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>

Indexcontroller.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>

2 个答案:

答案 0 :(得分: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'
    });
  });

答案 1 :(得分:0)

您也可以使用该服务。

该服务提供全局变量。因此,您可以将服务注入到不同的控制器中。