问

AngularJS - 按条件更改控制器？

发布于 2023-02-07 11:27

controller

function

foreach

service

图片

我有一个简单的表格,其中的数据总结了按下的项目(通过添加)

(JSBIN)

在此输入图像描述

(700 = 300 + 400)

表格受限于 ng-controller="OrderFormController"

这个方法有哪些内容:

$scope.total = function(){

        var total = 0;
        angular.forEach($scope.services, function(s){
            if (s.active){
                total+= s.price;
            }
        });

        return total;
    };

一切都好.

但如果图片看顶部,有一个复选框.

当它被检查时,我想在里面做完全不同的计算$scope.total

让我们说,而不是添加 - 做乘法:

$scope.total = function(){

        var total = 1;
        angular.forEach($scope.services, function(s){
            if (s.active){
                total*= s.price;
            }
        });

        return total;
    };

当然我可以检查方法内部是否选中了复选框,但我不想这样做.

题

将它绑定到不同方法(根据/ )的正确方法(我是angularjs初学者)是什么？checkedunchecked

1 个回答

似乎没有基于某些条件选择控制器的内置方法.该ngController指令似乎不适合插入名称{{ }}或通过控制器名称的字符串版本,因此似乎不可能通过ngController动态选择控制器基于范围中的某些条件.

我认为最灵活的解决方案是编写一个自定义指令,它接受一个字符串变量(包括一个表达式返回的变量)

<div dynamic-controller="checked ? 'CheckedController' : 'UncheckedController'">
  Inside {{name}}  
</div>

然后获取控制器的名称,将其放入ng-controller属性中,然后(重新)编译元素,并在每次dynamic-controller更改返回的表达式时执行此操作.这可以按如下方式完成:

app.directive('dynamicController', function($compile) {
  return  {
    transclude: 'element',
    scope: {
      'dynamicController': '=' 
    },
    link: function(scope, element, attr, ctrl, transclude) {
      var el = null;
      scope.$watch('dynamicController',function() {
        if (el) {
          el.remove();
          el = null;
        }
        transclude(function(clone) {
          clone.attr('ng-controller', scope.dynamicController);
          clone.removeAttr('dynamic-controller');
          el = $compile(clone[0])(scope.$parent)
          element.after(el);
        });
      });
    }
  }
});

你可以在这个Plunker中看到这个

2023-02-07 11:31 回答

与幸福约定2502895163

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签