使用指令在Angular JS中使用計算器

Question

我是Angular js的新手，正在嘗試構建計算器。 我的要求是每個文本框（要顯示）和按鈕都需要兩個單獨的指令。

問題是我得到了結果，但是文本框沒有得到更新。

下面是我編寫的代碼。

腳本文件：

var app = angular.module("app",[]);


    app.service('sharedProperties', function () {
        var showInput = '0';

        return {
            getProperty: function () {
                return showInput;
            },
            setProperty: function(value) {
                showInput = value;
            }
        };
    });


app.controller('myCtrl', function($scope,sharedProperties) {

    $scope.count = ['0','1','2','3','4','5','6','7','8','9','+','-','*','/','=','C'];       $scope.showInput2 = sharedProperties.getProperty();

}); app.directive("textdir",function() {    return {    restrict : 'E',     template : "<input type ='text' value='{{showInput2}}' id='txt'><br/>"      }; });

app.directive('counter',

  function() {

    return {

      restrict: 'EAC',

      template: '<div>'+
          '<button ng-repeat="i in internalCount" ng-click="kick(i)">{{i}}</button>'+
         '</div>',

      scope: {

                internalCount: '=model'

            },    controller : function($scope,sharedProperties)      {
          $scope.op1="";
          $scope.op2="";
          $scope.tempStr="";
          $scope.isContinue = true;
          $scope.showInput1 = sharedProperties.getProperty();

          $scope.kick = function(clickvalue)
          {
                switch(clickvalue)
                {
                    case "=":
                        if ($scope.tempStr != "" && $scope.op1!= "") 
                        {
                            if($scope.op2=="")
                            {

                                $scope.showInput1 = $scope.clac($scope.tempStr, $scope.showInput1, $scope.op1); 


                            }
                            if(($scope.op1=="*"||$scope.op1=="/") && $scope.op2=="-")
                            {
                                $scope.showInput1 = -$scope.showInput1;
                                $scope.showInput1 = $scope.clac($scope.tempStr, $scope.showInput1, $scope.op1); 
                            }
                            if($scope.op1=="-" && ($scope.op2=="*"||$scope.op2=="/"))
                            {
                                $scope.tempStr = -$scope.tempStr;
                                $scope.showInput1 = $scope.clac($scope.tempStr, $scope.showInput1, $scope.op2); 
                            }
                            alert($scope.showInput1);                           
                            $scope.op1="";
                            $scope.op2="";          
                        }
                        break;
                    case "+":
                    case "-":
                    case "*":
                    case "/":
                        if($scope.op1=="")
                        {  
                            $scope.tempStr = $scope.showInput1;
                            $scope.isClear=true;
                            $scope.op1=clickvalue;

                        }
                        else
                        {
                            $scope.tempStr = $scope.showInput1;
                            $scope.isClear=true;
                            $scope.op2=clickvalue;

                        }
                        break;
                    case "C":
                        $scope.showInput1 = "0";
                        $scope.isClear = false;
                        $scope.tempStr = "";
                        $scope.clacType = "";
                        break;

                    default :  
                        $scope.showInput1 = $scope.showInput1 == "0" ? "" : $scope.showInput1;
                        $scope.isContinue = false;
                        if ($scope.isClear) 
                        {
                            $scope.showInput1 = "";
                            $scope.showInput1 += clickvalue;
                            $scope.isClear = false;
                        } 
                        else 
                        {
                            $scope.showInput1 += clickvalue;
                        }
                        //alert($scope.showInput);
                        break;
                }
                                                        }

                        $scope.clac = function(num1,num2,type)          {
                switch (type) 
                {
                    case "+":
                        return parseFloat(num1) + parseFloat(num2);
                    case "-":
                        return parseFloat(num1) - parseFloat(num2);
                    case "*":
                        return parseFloat(num1) * parseFloat(num2);
                    case "/":
                        return parseFloat(num1) / parseFloat(num2);
                    default:
                        return "lkl";
                        break;
                }           }     }




    };

  });

HTML檔案：

<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
        <script src = "AngularCalci.js"></script>

    </head>
    <body>
        <div ng-app="app">

        <div ng-controller="myCtrl">

            <div>
                <textdir/>

            </div>
            <counter model="count"></counter>


        </div>

</div>

    </body>
</html>

Answer 1

每次看到0時，它都沒有改變。 原因是它已被初始化為0，並且此后從未將其值設置為其他值。

您需要調用set函數。 您錯過了添加此代碼的步驟。

sharedProperties.setProperty(value);

更新：

我已經觀察到將值設置回文本框的方式的另一個問題。 如果您在控制器中看到此行，則它僅在開始時執行。 但是您的數據可能在執行期間隨時更改。 所以還需要照顧這種情況。

$scope.showInput2 = sharedProperties.getProperty();

您可能需要更多地了解事件（$ broadcast，$ emit，$ on）和觀察者（$ watch）才能解決此問題。