Question

我是Angularjs的新人我想在指令

中执行以下操作

<!--get numb1&numb2 from user input-->
<div>
  <input ng-model="numb1" type=number/>
</div>

<div>
  <input ng-model="numb2" type=number/>
</div>

<!--result display on the following input box, not allow to edit-->
<div>
  <input ng-model="result" formula="some formula here, can be anything" readonly/>
</div>

numb1＆amp; numb2可以随时更改，使用$ watch代替ngChange。任何人都可以指导我吗？

Answer 1

您在同一范围内，因此，您可以使用ng-value来设置给定numb1和numb2的新值。例如，您的公式为numb1 + numb2，只需尝试以下内容：

<input ng-model="result" ng-value="{{numb1 + numb2}}" readonly/>

Answer 2

您可以使用以下代码段来实现您的要求。

HTML

<div ng-app="demo">
  <div ng-controller="DefaultController as vm">
    <inputs formula="vm.formula"></inputs>
  </div>
</div>

<script type="text/template" id="inputsTemplate">
  <div>
    <input type="number" ng-model="vm.a"/>
  </div>
  <div>
    <input type="number" ng-model="vm.b"/>
    </div>
  <div>
    <input type="number" ng-model="vm.result" readonly/>
  </div>
</script>

AngularJS代码

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .controller('InputsController', InputsController)
  .directive('inputs', inputs);

  function DefaultController() {
    var vm = this;
    vm.formula = 'a + b';
  }

  function inputs() {
    var directive = {
      restrict: 'E',
      scope: {
        formula: '='
      },
      template: function () {
        return angular.element(document.querySelector('#inputsTemplate')).html();
      },
      controller: InputsController,
      controllerAs: 'vm',
      bindToController: true
    };

    return directive;
  }

  InputsController.$inject = ['$scope', '$parse'];

  function InputsController($scope, $parse) {
    var vm = this;
    var expressionFunc = $parse(vm.formula);

    $scope.$watchGroup(['vm.a', 'vm.b'], function (newValue, oldValue, scope) {
      if (angular.isDefined(vm.a) && angular.isDefined(vm.b)) {         
        var result = expressionFunc(vm);
        vm.result = result;
      }
    });
  }

jsfiddle链接here

编码样式遵循angular-styleguide by John Papa和Pro AngularJS by Adam Freeman

说明：

有一个主控制器在其范围内设置公式，例如a + b，并通过名为inputs的属性传递给名为formula的指令，这是一个元素指令意味着它仅限于作为单独的html元素应用。

inputs指令从具有html内容的script标记中获取其模板通过使用指令定义的template属性。 inputs指令使用控制器别名语法绑定了自己的控制器。

inputs指令在其控制器范围内有三个对象，它们是a，b和结果，而InputsController使用返回函数的$parse服务发生了魔术当解析一个表达式时，它确实可以在一个对象上进行求值以执行该表达式并获得结果，即

var expressionFunc = $parse(vm.formula);
var result = expressionFunc(vm);
vm.result = result;

另外，由于我们需要在作用域上同时观察a和b对象，因此我们可以使用$watchGroup对象上的$scope函数来处理更改事件并相应地更新视图。

注意：我们只解析一次var expressionFunc = $parse(vm.formula);并多次执行表达式var result = expressionFunc(vm);这是一个重要因素，应该考虑代码质量和性能

Angularjs根据给定的公式计算

2 个答案: