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）以解决此问题。

使用指令的角度js中的计算器

1 个答案: