AngularjsはAngularjs の新しい

Question

イム与えられた式に基づいて計算し、私は& numb2は$ ngChangeに代わりに見て使用し、いつでも変更することができディレクティブに以下の

<!--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ような何かをしたいと思います。 誰もが私にこれを案内できますか？

Answer 1

あなたは次のコードスニペットを使用しての要件を達成することができます：たとえば、数式はちょうどこのような何かをしようと、numb1 + numb2です。

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; 
     } 
    }); 
    } 

コーディングスタイルはangular-styleguide by John Papaからしてから続いているhere

jsfiddleリンクPro AngularJS by Adam Freeman

説明：

それが制限されていることを意味する要素指示のみように適用されるこのformulaと呼ばれる属性を通してinputsと呼ばれるようなa + bとディレクティブに渡され、その範囲に設定された式を有する主制御装置は、あります個々のhtml要素

inputsディレクティブはディレクティブの定義のtemplateプロパティを使用して、HTMLコンテンツ を持つscriptタグからそのテンプレートを取得します。 inputsディレクティブには、コントローラーエイリアシング構文を使用してバインドされた独自のコントローラーがあります。

inputs指令は、コントローラ範囲で3つのオブジェクトを持っている彼らは、Bだと結果と魔法は、実際のオブジェクトに評価することができる発現が解析されたときに関数を返す$parseサービスを使用して、InputsControllerで起こりますその式を実行し、また、我々は、スコープ上のAとBの両方のオブジェクトを監視する必要があるとして、

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

すなわち結果を得るために、我々は、変更イベントを処理するために$scopeオブジェクトに$watchGroup機能を使用してビューを更新することができますそれに応じて。

注：我々は唯一のvar result = expressionFunc(vm);何回も一度var expressionFunc = $parse(vm.formula);を解析し、式を実行している、これは重要な因子であり、コードの品質のためにとパフォーマンスを考慮すべきです。

Answer 2

あなたはng-valueを使用して、numb1とnumb2の新しい値を設定することができます。

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