Javascript 为什么ng bind没有'；我不能和AngularStrap一起工作？_Javascript_Angularjs_Tabs_Angular Strap_Ng Bind

Javascript 为什么ng bind没有'；我不能和AngularStrap一起工作？

javascript angularjs tabs

Javascript 为什么ng bind没有'；我不能和AngularStrap一起工作？,javascript,angularjs,tabs,angular-strap,ng-bind,Javascript,Angularjs,Tabs,Angular Strap,Ng Bind,我需要你的帮助，帮助我创建陷阱选项卡和显示计算数据。假设我有一些关于ng模型的输入。我计算它们并显示在ng bind中。在我使用AngularStrap的标签之前，一切都正常。然后我的输出变为NaN—当我更改ng模型的内容时，它看起来好像没有更新。你可以看看我这里的意思： index.html first.html {{first}} {{second}} {{multiply（）}} second.html {{first}} {{second}} {{add（）}} 真正奇怪的是，

我需要你的帮助，帮助我创建陷阱选项卡和显示计算数据。假设我有一些关于ng模型的输入。我计算它们并显示在ng bind中。在我使用AngularStrap的标签之前，一切都正常。然后我的输出变为NaN—当我更改ng模型的内容时，它看起来好像没有更新。你可以看看我这里的意思：

index.html

first.html


{{first}}
{{second}}
{{multiply（）}}

second.html


{{first}}
{{second}}
{{add（）}}

真正奇怪的是，当我在没有标签的情况下使用它时，它工作得非常好。错在哪里？如何使其与选项卡一起工作

这个例子很有魅力：


{{first}}
{{second}}
{{multiply（）}}

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <div bs-active-pane="tabs.activeTab" bs-tabs>
            <div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include="tab.templateUrl" bs-pane>
            </div>
        </div>
    </div>
</body>
</html>

angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap'])
.controller('myCtrl', ['$scope', function($scope){
$scope.multiply = function(){
    return $scope.first * $scope.second;
};
$scope.add = function(){
    return $scope.first + $scope.second;
};
$scope.tabs = [
{
    "title": "First",
    "templateUrl": "first.html"
},
{
    "title": "Second",
    "templateUrl": "second.html"
}];
$scope.tabs.activeTab = "First";
}]);

<input type="number" ng-model="first">
        <input type="number" ng-model="second">
        {{first}}
        {{second}}
        {{multiply()}}

<input type="number" ng-model="first">
        <input type="number" ng-model="second">
        {{first}}
        {{second}}
        {{add()}}

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <input type="number" ng-model="first">
        <input type="number" ng-model="second">
        {{first}}
        {{second}}
        {{multiply()}}
    </div>
</body>
</html>