Question

我创建了一个名为exampleservice的服务，其中我创建了一个名为dividee()的函数。以下是代码：

confusionapp.service('exampleservice', function($rootScope) {
    this.dividee = function(x, y) {
        $rootScope.enteredone = x;
        $rootScope.enteredtwo = y;
        $rootScope.showdivideresult = x / y;
    }
});

现在我做了两个输入，我可以输入值，我想我会在下面的div中得到分割值：

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice) {
    exampleservice.dividee(10, 3);
});

HTML：

<input type="text" ng-model="enteredone" />
<input type="text" ng-model="enteredtwo" />
<button ng-click="dividee(enteredone, enteredtwo);"></button>
<div>{{showdivideresult}}</div>

但是正在发生的事情是我在文本框中插入值并在加载时获得div中的分割值（即文本框中的10和3以及div中的3.33），但是当我更改任何值时不会文本框。请帮忙。提前致谢

Answer 1

您不应在$rootScope中使用service。创建执行所需操作并返回数据的函数。

您还需要在控制器范围中定义一个函数dividee，以便在视图中使用它。

var confusionapp = angular.module('confusionapp', []);
confusionapp.service('exampleservice', function() {
  //Perform operation on input and return data
  this.dividee = function(x, y) {
    return x / y;
  }
});

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice) {
  //define the dividee which will be execute on click handler
  $scope.dividee = function(enteredone, enteredtwo) {
    //persists the returned data
    $scope.showdivideresult = exampleservice.dividee(enteredone, enteredtwo);
  }

  //Set default values
  $scope.enteredone = 10;
  $scope.enteredtwo = 3;
  //Call method to set initial value
  $scope.dividee($scope.enteredone, $scope.enteredtwo);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="confusionapp" ng-controller="conFusionappCtrl">
  <input type="text" ng-model="enteredone" />
  <input type="text" ng-model="enteredtwo" />
  <button ng-click="dividee(enteredone, enteredtwo);">Divide</button>
  <div>{{showdivideresult}}</div>
</div>

Answer 2

答案就在这一行<div>{{showdivideresult}}</div>

当你在模板{{showdivideresult}}中写这个时，你正在打印控制器范围变量，而不是$ rootScope。

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice){

$scope.showdivideresult = 'That the variable you are printing';


});

不要将$ rootScope服务与控制器范围混淆（您必须在模板中使用）。

因此，要使其工作，您必须从服务函数返回值到控制器并将其插入控制器范围。

$scope.dividee = function(value1, value2) {
    $scope.showdivideresult = exampleservice.dividee(value1, value2);
  }

Answer 3

因为dividee函数不是conFusionappCtrl控制器的一部分所以无法找到它。

最初发生的事情是当您重新加载页面时exampleservice.dividee(10,3);被执行，enteredone，enteredtwo和showdivideresult的值被设置并绑定到视图元素。

您需要向控制器范围添加一个函数来处理按钮单击事件。

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice){    

    this.divide = function(x,y){    
        exampleservice.dividee(x,y); 
    }    
});

在ng-click

中调用该函数

<button ng-click="divide(enteredone, enteredtwo);"></button>

角度js服务不更新

3 个答案: