我实际情况是想做个记帐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不对或者有更好的建议,不妨写下评论,让我学习学习
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。