Question

我需要您对AngularStrap标签的帮助并显示计算数据。所以，让我们说我有一些ng-model的输入。我计算它们并以ng-bind显示。一切正常，直到我使用AngularStrap的标签。然后我的输出变为NaN - 当我改变它的内容时，看起来ng-model没有更新。你可以看看我的意思：

的index.html

<!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>

main.js

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

first.html

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

second.html

<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>

为什么ng-bind对我没有使用AngularStrap？

0 个答案: