Question

我已经有一个带有2个独立控制器的代码。

每个控制器的范围/视图都有input text和span。

一切都很好。

但是看看带有黄色标签的行（此时为空） - 在第二个控制器中找到，我希望该值与中的值相同控制器。

所以我期待这条线（并自动更改）：

FirstController的值是：First Cntrl

我已经知道我需要一个服务：

所以这是我的代码：

angular.module('app', [])
       .controller("FirstCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
    {
     myservice.messageFromCntrl1= this.message;
        this.message = "First Cntrl";
    }]).controller("SecondCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
    {

      this.message = "Second Cntrl";
      this.messageFromCntrl1 = myservice.messageFromCntrl1;
    }])
    .service('myservice', function()
    {
         this.messageFromCntrl1 =  "???";
    });

在第一个控制器中，我设置了

 myservice.messageFromCntrl1= this.message;

在第二个控制器中我读到：

this.messageFromCntrl1 = myservice.messageFromCntrl1;

在HTML中：

   Value from the FirstController is :<span style='color:red;'>{{myservice.messageFromCntrl1}}

但它不起作用。我错过了什么？

JSBIN

Answer 1

我修改了你的JSBIN，检查它here。我相信它现在就像你想要的那样。

angular.module('app', [])
   .controller("FirstCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
   this.message = myservice.messageFromCntrl1;
   this.message.data = "First Cntrl";
}]).controller("SecondCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{

  this.message = "Second Cntrl";
  this.messageFromCntrl1 = myservice.messageFromCntrl1;
}])
.service('myservice', function()
{
     this.messageFromCntrl1 =  {data:""};
});

在你看来

<div ng-controller="FirstCtrl as first">
  <input type="text" ng-model="first.message.data">
  <h1>{{first.message.data}}</h1>
</div>

<div ng-controller="SecondCtrl as second">
  <input type="text" ng-model="second.message"> 
  <h1>{{second.message}} </h1>
  Value from the FirstController is: 
  <span style='color:red;'>{{second.messageFromCntrl1.data}}</span>
</div>

首先，如果要在控制器之间更新此值，则需要使用对象而不是简单变量。使用对象操作引用和更新将在对象的所有引用之间共享。

其次，您尝试直接在视图中访问服务。您需要将服务引用绑定到控制器的范围。

Answer 2

我已经对您的jsbin进行了编辑，告诉我这是否是您需要的

https://jsbin.com/mapuwojocu/1/edit?html,js,output

Play()

Answer 3

您无法通过视图访问服务。另外，将所有这些更改为控制器中的$ scope。看看这个例子：

angular.module('app1', [])
.controller("FirstCtrl", ['$scope', 'myservice', function($scope, myservice)
    {
        $scope.message = "First Cntrl from code";
        myservice.messageFromCntrl1= $scope.message;

    }])
.controller("SecondCtrl", ['$scope', 'myservice', function($scope, myservice)
    {

      $scope.message = "Second Cntrl Code";
      $scope.messageFromCntrl1 = myservice.messageFromCntrl1;
    }])
.service('myservice', function()
    {
         this.messageFromCntrl1 =  "???";
    });

Angular的控制器无法读取服务价值？

3 个答案: