AngularJS - 变更控制人的条件？ [英] AngularJS - Change controller by condition?

问题描述

我有一个简单的形式与总结了pressed项目（通过加法）数据

I have a simple form with data which summarize the pressed items ( via addition)

（ JSBIN ）

(JSBIN)

（700 = 300 + 400）

(700=300+400)

的形式为界与 NG-控制器=OrderFormController

这inturn有此方法：

Which inturn has this method :

$scope.total = function(){

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

        return total;
    };

一切ok。

不过顶一下如果画面，有一个复选框。

But look at the top if the picture , there is a check box.

当它的检查，我想这样做的完全不同的计算在 $ scope.total

When it's checked , I want to do totally different calculation inside $scope.total

假设代替的除了的， - DO的乘的：

Let's say , instead of addition - do multiplication :

$scope.total = function(){

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

        return total;
    };

的当然我可以在方法内部选中该复选框是否被选中，但我并不想这样做。的

问

什么是的右键的方式（我angularjs初学者），它的边界，以不同的方式（根据检查 / 选中）？

What is the right way ( i'm angularjs beginner) of bounding it to a different method (according to checked/unchecked)?

推荐答案

似乎没有要选择基于某些条件控制器的内置方式。在 ngController 指令似乎并没有与名称的插值发挥出色，通过 {{}} ，或传递控制器名称的字符串版本，所以它似乎并不有可能选择通过 ngController 控制器动态地根据范围一定条件。

There doesn't seem to be a built-in way to choose a controller based on some condition. The ngController directive doesn't seem to play well with interpolation of the name via {{ }}, or passing a string version of the controller name, so it doesn't seem to be possible to choose a controller by ngController dynamically based on some condition in the scope.

最灵活的解决方案，这个我觉得是写一个自定义的指令，它接受一个字符串变量（包括一个由前pression返回）

The most flexible solution to this I think is writing a custom directive, that accepts a string variable (including one returned by an expression)

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

这则取控制器的名称，将其放在一个 NG-控制器属性，然后（重新）编译元素，做到这一点，只要前任$通过返回p $ pssion动态控制器的变化。这可以如下进行：

That then takes the name of the controller, puts it in an ng-controller attribute, and then (re)compiles the element, and do this whenever the expression returned by dynamic-controller changes. This could be done as follows:

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

这篇关于AngularJS - 变更控制人的条件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！