AngularJS-服务无法正常工作

时间:2018-07-20 09:35:08

标签: angularjs django-templates

我是AngularJS的新手,目前在使用GeoNode门户进行开发时遇到了一些问题。

我发现,在修改函数名称时,这些服务无法与Django模板引擎一起使用,并且那些新添加的服务也根本无法使用。我尝试使用控制台进行调试,并发出警报以找出问题所在,但它不起作用...

其中写入了cart.js函数的hasLayer的完整代码:

'use strict';

(function(){
  angular.module('cart', [])
    .controller('CartList', function($scope, cart){
      $scope.cart = cart;
      $scope.layers_params = '';

      $scope.newMap = function(){
        var items = cart.getCart().items;
        var params = '';
        for (var i = 0; i < items.length; i++){
          params += 'layer=' + items[i].detail_url.split('/')[2] +'&';
        }
        window.location = '/maps/new?' + params;
      }

      $scope.hasLayer = function() {
        var result = 0;
        var items = cart.getCart().items;
        for (var i = 0; i < items.length; i++){
          if (items[i].detail_url.indexOf('/layers/') > -1) {            
             result++;
          }
        }
        return (result > 0 ? true : false);
      }

      $scope.bulk_perms_submit = function(){
        var items = cart.getCart().items;
        var permissions = permissionsString($('#permission_form'), 'base');
        var selected_ids = $.map(items, function(item){return item.id});
        var message = $('#bulk_perms_message');
        if(selected_ids.length == 0){
         message.find('.message').html('Please select at least one resource to set the permissions');
         message.addClass('alert-danger').removeClass('alert-success alert-warning hidden');
         return;
        }
        $.ajax(
         {
           type: "POST",
           url: "/security/bulk-permissions",
           data: {
             permissions: JSON.stringify(permissions),
             resources: selected_ids
           },
           success: function(data) {
             var not_changed = $.parseJSON(data).not_changed;
             if (not_changed.length > 0){ 
               message.find('.message').html('Permissions correctly registered, although the following resources were'+ 
                   ' skipped because you don\'t have the rights to edit their permissions:');
               message.find('.extra_content').html(not_changed.join('</br>'));
               message.addClass('alert-warning').removeClass('alert-success alert-danger hidden');
             }
             else{
               message.find('.message').html('Permissions correctly registered.');
               message.addClass('alert-success').removeClass('alert-warning alert-danger hidden');
             }
           },
           error: function(data){
             message.find('.message').html($.parseJSON(data).error);
             message.addClass('alert-danger').removeClass('alert-success alert-warning hidden');
           }
         }
        );
      };
    })

    .directive('resourceCart', [function(){
      return {
        restrict: 'E',
        templateUrl: "/static/geonode/js/templates/cart.html"
      };
    }])

    .service('cart', function(){

      this.init = function(){
        this.$cart = {
          items: []
        };
      };

      this.getCart = function(){
        return this.$cart;
      }

      this.addItem = function(item){
        if (this.getItemById(item.id) === null){
          this.getCart().items.push(item);
        }
      }

      this.removeItem = function(item){
        if (this.getItemById(item.id) !== null){
          var cart = this.getCart();
          angular.forEach(cart.items, function(cart_item, index){
            if (cart_item.id === item.id){
              cart.items.splice(index, 1);
            }
          });
        }
      }

      this.toggleItem = function(item){
        if (this.getItemById(item.id) === null){
          this.addItem(item);
        }
        else {
          this.removeItem(item);
        }
      }

      this.getItemById = function (itemId) {
        var items = this.getCart().items;
        var the_item = null;
        angular.forEach(items, function(item){
          if (item.id === itemId){
            the_item = item;
          }
        });
        return the_item;
      }

      this.getFaClass = function(id){
        if (this.getItemById(id) === null){
          return 'fa-cart-plus';
        }
        else {
          return 'fa-remove'
        }
      }
    })

    .run(['cart', function(cart){
      cart.init();
    }])
})();

上面的代码最初是由框架提供的,我尝试添加新的服务hasLayer()。使用该服务来控制ng-disabled中使用的按钮的cart.html属性:

this.hasLayer = function() {
    var result = 0;
    var items = cart.getCart().items;
    angular.forEach(items, function(item) {
      if (item.detail_url.indexOf('/layers/') > -1){
        result++;
      }
    });
    if (result > 0)
        return true;
    else
        return false;
}

我更改为将其用作范围函数,但仍然无法正常工作...

$scope.hasLayer = function() {
   var result = 0;
   var items = cart.getCart().items;
   for (var i = 0; i < items.length; i++){
     if (items[i].detail_url.indexOf('/layers/') > -1) {             
       result++;
     }
   }
   return (result > 0 ? true : false);
}

cart.html

{% load i18n %}
...
  <div class="btn-group" role="group">
     <button type="button" class="btn btn-default" ng-disabled="!cart.hasLayer()" data-toggle="modal" ng-click="newMap()">{% trans "Create a Map" %}</button>
  </div>
...

但是它根本不起作用,当我将函数名称更改为其他名称时,例如将newMap更改为newmap(或{{1} })。然后nmap的原始功能崩溃。

我不确定这是怎么回事...有人可以帮忙吗?

0 个答案:

没有答案