$ scope变量,ng-hide / show

时间:2016-05-15 15:39:21

标签: javascript angularjs

我想我错过了关于$ scope的一些事情。我有一些在顶部导航中有变量的ng-hide / show。在通过app config功能链接到控制器的ng-view内部。我的导航代码在" NavController"中。但我在导航之外的视图中有一个页面链接到" AppointmentController"运行负责设置约会的代码。完成一些步骤后,您就可以登录了,这段代码在AppointmentController视图中,但我已经完成了 -

编辑 - 我刚刚意识到,下面的输入必须在一个单独的控制器中。当我将它附加到NavController时,我希望apptLogin()更改主视图数据,这些数据都在一个单独的控制器中。

<input ng-controller="NavController" ng-click="apptLogin(email)" value="Login and Continue" class="btn btn-default pull-left" >

$scope.apptLogin = function(email){
  $http({
    method: 'POST',
    data: {email: email},
    url: '/common_includes/ajax/validateUser.php',
  }).then(function successCallback(response) {
      if(response.data.status == 0){
        var login_message = '<div class="alert alert-danger" role="alert">'+response.data.message+'</div>';
        $('#login_modal .modal-body').html(login_message);
        $('#login_modal').modal();
        $interval(function(){
          $('#login_modal').modal('hide');
        }, 1400, 1);
      }
      if(response.data.status == 1){
        $scope.appt_history = true;
        console.log($scope);
        var login_message = '<div class="alert alert-success" role="alert">'+response.data.message+'</div>';
        $('#login_modal .modal-body').html(login_message);
        $('#login_modal').modal();
        $interval(function(){
          $scope.click_login = false;
          $('#login_modal').modal('hide');
        }, 1400, 1);
      }

代码全部运行。这一行是应该切换隐藏/显示但不是。 -

$scope.appt_history = true;

如果我感到困惑,因为如果上面一行之后的console.log($ scope),我看到所有的NavController变量,$ scope.appt_history确实== true,但是hide / show没有改变。我在这里缺少什么?

1 个答案:

答案 0 :(得分:1)

简单的方法是将$ rootScope注入两个控制器并将共享数据属性放在那里而不是$ scope中,但这不是推荐的做事方式。

但是,我推荐使用服务。它们编写起来很简单,并且可以轻松地跨控制器共享数据,而不必诉诸于污染根范围。

基本上,您首先创建服务并将要共享的属性添加到其构造函数

app.service('sharingSvc', function() {
  this.sharedValue = 'initialized';
});

现在,您可以将该服务注入需要访问共享属性的控制器中。

app.controller('pageOneCtrl', function($scope, sharingSvc) {
  $scope.pageOneSare = sharingSvc;
});

Here is a complete, but very basic Plnkr显示如何使用服务跨多个控制器和视图共享数据。这应该足以让你入门。希望这可以帮助你!