比如我要用angularjs做个计算器

2024年1月22日 207次阅读 来源: Doyle

我实际情况是想做个记帐app，由上到下有一个显示金额的框，有一些其他的选项或输入框，云云。点击显示金额的框就会在底部弹出键盘，按键由0-9，小数点，+-*/，AC，=构成。于是问题就变成了我要做一计算器，我且将之分为显示计算结果的区域和键盘区域。

显示金额区域属于父级Controller，如BigController。

// big.controller.js
function BigController($scope) {
  $scope.money = 0;
}

// big.html
<div>
  <div>{{ money }}</div>
  <my-keyboard calculation="money"></my-keyboard>
</div>

键盘区域便是上方代码中的my-keyboard了，我的directive是这样写的

// my-keyboard.direcitve.js
function myKeyboard() {
  var directive = {
    restrict: 'EA',
    scope: {
      calculation: '='
    },
    templateUrl: 'templates/keyboard.html',
    replace: true,
    controller: KeyboardController
  };

  return directive;

  KeyboardController.$inject = ['$scope'];

  function KeyboardController($scope) {
    ...
    $scope.calculation = 123456;
    ...
  }
}

这样做，修改calculation就能父级的money就能同步了，这样做的好处，我只能想到是这个键盘可以放在任何地方，只要给他绑定一个外部scope的变量，他就可以同步更新。

有个问题，本来指令就是继承了父级控制器的scope，直接操作money不是更简单吗？虽然网上有说，没去细究也只懂个大概而已，至于更深层次的道理，我就不懂了，如果看官觉得我这样用ng不对或者有更好的建议，不妨写下评论，让我学习学习

    原文作者：Doyle
    原文地址: https://segmentfault.com/a/1190000003897426
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞