Question

我尝试使用Angular创建一个工具，接受来自滑块工具的用户输入，并自动更新＆＃34;估计＆＃34;每当值改变时字段。但是，数据似乎只对视图的方式具有约束力;显示用户输入，但似乎没有在范围内注册。

这是HTML：

<h3 ng-controller="calcController" ng-model="estimate" class="floating-menu">${{estimate}}</h3>
    <form ng-controller="calcController" method="post" action="/estimate">

        <div class="container">
            <div class="vals">${{values.insurance}}</div>
            <div id="insurance-slider">
                <slider floor="0" ceiling="250" value="125" step="25" precision="2" ng-model="values.insurance" ng-change="changeVal()" translate="currencyFormatting"></slider>
            </div>

        <div class="container">
            <div class="vals">${{values.lease}}</div>
            <div id="lease-slider">
                <slider floor="0" ceiling="250" value="125" step="25" precision="2" ng-model="values.lease" translate="currencyFormatting"></slider>
            </div>
        </div>
     </form>

这是Angular：

 //create the module
   angular.module('Breeze', ['ngRoute', 'ngResource', 'ui.slider'])

   .config(function($routeProvider) {
       $routeProvider

       // route for the calculator page
           .when('/', {
           templateUrl: 'partials/calculator.html',
           controller: 'calcController'
       });
   })

    // create the controller and inject Angular's $scope
   .controller('calcController', function($scope, $http) {
       $scope.values = {
           // Default values
           insurance: 125,
           lease: 125,
       };

       $scope.estimate = $scope.values.insurance + $scope.values.lease
      }

       // Formatting for scale bar
       $scope.currencyFormatting = function(value) {
           return value.toString() + " $";
       }
   })

我尝试添加$ watch和$ broadcast功能，但似乎无法让它们正常工作。

这就是Angular的样子：

   $scope.$watch("values", function(newVal, oldVal, scope) {
       scope.estimate = addVals();
    })
  $scope.changeVal = function() {
    $scope.estimate = addVals();
    console.log('hi')

   $scope.estimate = $scope.values.insurance + $scope.values.lease
  }

想法？

Answer 1

在开始时将它们设置为相同不会起作用。在您看来，不要使用估算字段，而只使用此

<div ng-controller="calcController" ng-app="Breeze">
    <h3 ng-model="estimate" class="floating-menu">${{values.insurance + values.lease }}</h3>
        <form method="post" action="/estimate">

            <div class="container">
                <div class="vals">${{values.insurance}}</div>
                <div id="insurance-slider">
                    <slider floor="0" ceiling="250" value="125" step="25" precision="2" ng-model="values.insurance" ng-change="changeVal()" translate="currencyFormatting"></slider>
                </div>

            <div class="container">
                <div class="vals">${{values.lease}}</div>
                <div id="lease-slider">
                    <slider floor="0" ceiling="250" value="125" step="25" precision="2" ng-model="values.lease" translate="currencyFormatting"></slider>
                </div>
            </div>
           </div>
         </form>
</div>

这会随着值的变化而增加。

另一件可能会破坏的事情是你有两个控制器调用同一个控制器而没有app。需要使用新的div更改它，并删除其余的ng控制器。

另外，请确保您的网页上包含ui slide javascript文件。

Answer 2

您在HTML中使用了两个嵌套ng-controller="calcController"。因此，控制器的两个实例（两个$ scope）将具有自己的estimate值，因此当您更新内部估计时，上层估计不会知道。

你应该删除<form>中的第二个ng-controller（如果控制器不同，那么你将估计变量放在一个对象中，例如$ scope.model.estimate，这样两个控制器之间的属性继承实际工作。但在你的情况下，没有理由有两个控制器。）

此外，您应该删除ng-model="estimate"代码中的<h3>，但该代码无效。

Answer 3

您是否尝试绑定到对象而不是基本类型？

$scope.values.estimate = $scope.values.insurance + $scope.values.lease

在这里看到类似的问题： Angularjs: 2 way binding not working in included template

这是一个小提琴http://jsfiddle.net/U3pVM/9330/

角度数据 - 无法将更新值绑定到范围（使用滑块）

3 个答案: