Question

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

服务：

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() 
    };
}

这是我要避免的摘要

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>

Answer 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>

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

1 个答案: