Javascript 在angularjs中从控制器内的外部文件调用对象方法_Javascript_Angularjs

Javascript 在angularjs中从控制器内的外部文件调用对象方法

javascript angularjs

Javascript 在angularjs中从控制器内的外部文件调用对象方法,javascript,angularjs,Javascript,Angularjs,我用AngularJS做了一个简单的计算器，就我个人而言，我不知道如何让它工作。我的任务是使java计算器程序适应javascript，然后给它一个视图。以下是我正在使用的HTML文件： <!DOCTYPE html> <html ng-app> <head> <title>Calculator</title> <script src="js/angular.min.js"></script> <s

我用AngularJS做了一个简单的计算器，就我个人而言，我不知道如何让它工作。我的任务是使java计算器程序适应javascript，然后给它一个视图。以下是我正在使用的HTML文件：

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Calculator</title>
<script src="js/angular.min.js"></script>
<script src="js/calculator.js"></script>
<script>
    function CalcController($scope){
        $scope.calc = Calculator;
    }
</script>
</head>
<body ng-controller='CalcController'>
    <p>{{calc.val}}</p>
</body>
</html>


计算器
函数CalcController（$scope）{
$scope.calc=计算器；
}
{{calc.val}}

文件“calculator.js”创建了一个名为calculator的对象。我试图在HTML文件中使用该文件中的方法和变量，但是{{calc.val}}没有正确显示

我可能做错了很多事情，但有人能帮我吗

下面是calculator.js文件：

var Calculator = {
    val: 0;
    old: 0;
    op: '=';
    isClean: true;

    process: function(c){
        if(isClear(c)){
            this.val = 0;
            this.old = 0;
            this.op = '=';
            this.isClean = true;
        }
        else if(isDigit(c)){
            var d = evalDigit(c);
            if(this.isClean){
                this.old = this.val;
                this.val = d;
            }
            else{
                this.val = (this.val * 10) + d;
            }
            this.isClean = false;
        }
        else if(isOp(c)){
            var v = evalOp(this.op, this.old, this.val){
                if(!this.isClean){
                    this.old = this.val;
                }
                this.val = v;
                this.op = c;
                this.isClean = true;
            }
        }
    }

    isOp: function(c){
        switch(c){
            case '=' : return true;
            case '+' : return true;
            case '-' : return true;
            case '*' : return true;
        }
        return false;
    }
    evalOp: function(c, m, n){
        switch(c){
            case '=' : return n;
            case '+' : return m + n;
            case '-' : return m - n;
            case '*' : return m * n;
        }
    }
    isDigit: function(c){
        return c >= '0' && c <= '9';
    }
    evalDigit: function(c){
        return c - '0';
    }
    isClear: function(c){
        return c == 'c';
    }
};

var计算器={
val:0；
年龄:0 ;；
op:'='；
伊斯克莱恩：是的；
过程：功能（c）{
if（isClear（c））{
这个值=0；
这个.old=0；
this.op='='；
this.isClean=true；
}
否则，如果（i数字（c））{
var d=蒸发率（c）；
如果（this.isClean）{
this.old=this.val；
这个值=d；
}
否则{
this.val=（this.val*10）+d；
}
this.isClean=false；
}
否则，如果（isOp（c））{
var v=蒸发量（this.op，this.old，this.val）{
如果（！this.isClean）{
this.old=this.val；
}
这个。val=v；
这个。op=c；
this.isClean=true；
}
}
}
isOp：函数（c）{
开关（c）{
案例“=”：返回true；
大小写“+”：返回true；
案例“-”：返回true；
案例“*”：返回true；
}
返回false；
}
评估：功能（c、m、n）{
开关（c）{
案例“=”：返回n；
大小写“+”：返回m+n；
案例'-'：返回m-n；
案例“*”：返回m*n；
}
}
isDigit:函数（c）{
return c>='0'&&cAngular需要运行一些东西，这些东西不一定要像我在你知道你在做什么后向你描述的那样实现，但我将尝试给出直接的方向，以便在页面上获得一些东西。首先，你需要一个app.js
文件
angular.module('myApp', [])

angular.module('myApp').controller('calcController', function($scope){ 
    $scope.calc = {val: 1} 
})

其中，myApp
是您希望为应用程序命名的名称。当您使用Angular（依赖项注入）进行更复杂的操作时，数组（[]
）很重要，但现在请忽略它
然后制作一个controller.js
文件
angular.module('myApp', [])

angular.module('myApp').controller('calcController', function($scope){ 
    $scope.calc = {val: 1} 
})

这里我们要说的是我们正在制作的控制器是哪个应用程序的一部分（myApp
），我们正在命名控制器（calcController
），然后声明控制器中的功能和数据（功能（$scope）.
）.$scope
是控制器向视图（HTML）显示功能和数据所需的内容。控制器是计算器的逻辑所在。当您需要从HTML页面访问函数时，必须将它们放在$scope
对象上。您现在应该能够向HTML中添加更多的内容，以实际查看页面上的值
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
    <title>Calculator</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/calculatorCtrl.js"></script>
</head>
<body ng-controller='calcController'>
    <p>{{calc.val}}</p>
</body>
</html>

然后，您必须将其放在HTML中的button对象上，才能真正调用该函数：

我在这里有点过于简化了，但希望这能让您走上正轨。
在开始使用angular之前，您需要创建一个模块。基本上，您将创建的每个控制器都需要在一个模块中。要创建一个模块，您需要执行以下操作：
angular.module('myApp', []); 
// creates new module called new app
// empty array as second parameter is where you can add other modules as dependency

现在您已经创建了一个模块，您需要在该模块中分配控制器
var calcApp = angular.module('calcApp');
// notice this doesn't have the second parameter. 
// This means we are getting the module we created earlier and assigning it to a variable `calcApp`
calcApp.controller('CalcController', function($scope) {
    $scope.calc = Calculator;
});
// The first parameter of calculator function is the calculator name. 
// and the second is its implementation function 
// Then we assign Calculator to $scope which is available in the controller

因此，要组合所有代码，您的代码如下所示：
<!DOCTYPE html>
<html ng-app>
<head>
    <title>Calculator</title>
<script src="js/angular.min.js"></script>
<script src="js/calculator.js"></script>
<script>
    var calcApp = angular.module('calcApp');
    calcApp.controller('CalcController', function($scope) {
        $scope.calc = Calculator;
    });
</script>
</head>
<body ng-controller='CalcController'>
    <p>{{calc.val}}</p>
</body>
</html>


计算器
var calcApp=角度模块（'calcApp'）；
calcApp.controller（'CalcController'，函数（$scope）{
$scope.calc=计算器；
});
{{calc.val}}

显然，这是一个过于简化的例子。如果你想了解更多，我强烈建议你去阅读angular js
这里有一些资源，您可以从中了解angularjs


是否可以附加calculator.js
？根据您在此处使用的angular.js版本，您使用的是一种不推荐的声明angular的方式。这不适用于angular 1.3或更高版本。