在控制器的 ng-if 中使用服务功能答案

【问题标题】：Using service function in controller's ng-if在控制器的 ng-if 中使用服务功能
【发布时间】：2019-02-05 03:51:17
【问题描述】：

我正在尝试根据我的服务功能设置元素的可见性。有没有办法在不再次复制控制器中的功能的情况下做到这一点？

服务：

angular
.module('app')
.service('userService', userService);

userService.$inject = ['$window', '$rootScope', '$uibModalStack', '$state'];

function userService($window, $rootScope, $uibModalStack, $state) {

    var service = this;
    service.user = {};

    service.returnTrue= function() {
        return true;
    };

};

控制器的 HTML：

<div>
   <p ng-if="userService.returnTrue()">Display if service's function returns true</p>
</div>

我想避免像这样在我的控制器中复制函数

angular
    .module('app')
    .controller('mainController', mainController);

mainController.$inject = ['userService'];

function mainController(userService) {

    var vm = this;

    vm.returnTrue = function() {
        return userService.isInRole() 
    };
}

这是我要避免的内容的 sn-p

angular.module('app',[])

.service('userService', function(){
   var service = this;
   
   service.returnTrue = function() {
       return true;
   }
})

.controller('mainCtrl', function(userService){
  var vm = this;
  vm.disableSave = true
  
  vm.returnTrue = function() { 
     return userService.returnTrue()
  };
})

<html ng-app="app">
 <body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="mainCtrl as vm">
  <p ng-if="vm.returnTrue()">Display if value returned is true</p>
</div>
  </body>
 </html>

【问题讨论】：

Use service into View Angular JS的可能重复
建议的副本不是该问题的好答案。它没有给出一个很好的模板示例。接受的答案声称在模板中嵌入函数是不好的做法，但没有解释原因。 From review.

标签： angularjs

【解决方案1】：

您可以将service 添加到vm，然后在您的模板中访问它。

即

您可以将控制器更新为

function mainController(userService) {
    var vm = this;
    vm.userService = userService;
}

而你的 html 为

<div>
   <p ng-if="vm.userService.returnTrue()">Display if service's function returns true</p>
</div>

【讨论】：

这不是在复制 userService 吗？
它不是重复的，它只是引用同一个对象。此外，模板中没有直接访问服务的方法。
@LazioTibijczyk 很好，因为服务是单例的。只创建一个实例，然后可以在其他地方多次引用