Question

从拨号盘取出时，我需要将电话号码更新到控制器。当拨号盘超过9位控制台日志显示数字但在Controller中没有更新。在控制器功能中我添加了警报。所以警告显示未定义的变量。

控制器

var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
    $scope.phonenumber="";
    var url = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;
    $scope.updatePhone = function (id) {
        $scope.phonenumber=id;
        alert('Here the number should be, but is not: '+ id + "---:" + $scope.phonenumber);
        $scope.phonenumber="";
    };
});

视图

<div ng-app="myApp" ng-controller="PosController" class="panel" >
    <div class="input-group col-xs-4">  
        <div class="input-group-btn">
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
        </div><!-- /btn-group -->        
        <div ng-app="myApp" ng-controller="PosController">
            <input  id="phonenumber" class="form-control" ng-model="phonenumber" />
            <!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
        </div>
        <div class="input-group-btn" >
            <button type="button" class="btn btn-success">Cliente</button>
        </div><!-- /btn-group -->
        <div ng-app="myApp" ng-controller="PosController">
            <input type="text" id="cliente" onclick="valor();" class="form-control" ng-focus="updatePhone($('#phonenumber').val());"> 
        </div>
    </div> 
</div>

功能

function updatePhoneNumber(btnpressed){          
    $("#phonenumber").val($("#phonenumber").val() + btnpressed);
    if ($("#phonenumber").val().length >9){           
        console.log('validando '+ $("#phonenumber").val());
        $('#cliente').focus();
        $('#myModal').modal('hide');
    }        
}

Answer 1

你不应该结合使用JQuery和AngularJs。你想要实现的目标可以通过控制器中的一个简单例程来完成。

尝试在html文件中使用ng-click来调用您的电话例程

AngularJs和JQuery只能用于自定义指令或组件

Answer 2

你的代码中有很多“错误”，但是当你来自JQuery世界时，角度需要时间。根据经验：“不要将JQuery与Angular一起使用”。

我做了一个简单的说明，如何以一种简单的方式实现你的目标：
https://plnkr.co/edit/K6G95OFsaYt3AAJVujZf?p=preview

研究一下。

最重要的一点：
1.不要一直使用ng-app和ng-contoller 2.使用ng-click处理点击事件
3. JQuery在这里没用。

控制器：

app.controller('MainCtrl', function($scope) {


  $scope.phonenumberFromDial = "";
  $scope.phonenumber = "";

  var url = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;

  $scope.updatePhoneNumber = function() {

    if($scope.phonenumberFromDial.length > 9) {
      console.log("Log phonenumber: " + $scope.phonenumberFromDial);
    } else {
      $scope.phonenumber = $scope.phonenumberFromDial;
    }

  };

});

查看

  <div>
    Phonenumber from dial:
    <input type="text" ng-model="phonenumberFromDial"/>
    <br>
    <button ng-click="updatePhoneNumber()">Save Phonenumber</button>

    <div>
      Saved phonenumber in controller: {{phonenumber}}
    </div>
  </div>

这是一个简单的plunker只是为了理解基础知识。我希望我能正确理解你的问题。

Angularjs Controller中未更新变量

控制器

视图

功能

2 个答案: