Mô hình Ng không cập nhật giá trị bộ điều khiển

Có lẽ là câu hỏi ngớ ngẩn, nhưng tôi có dạng html với đầu vào và nút đơn giản:

<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}

Sau đó, trong bộ điều khiển (mẫu và bộ điều khiển được gọi từ routeProvider):

$scope.check = function () {
    console.log($scope.searchText);
}

Tại sao tôi thấy chế độ xem được cập nhật chính xác nhưng không được xác định trong bảng điều khiển khi nhấp vào nút?

Cảm ơn!

Cập nhật: Có vẻ như tôi đã thực sự giải quyết vấn đề đó (trước đây phải đưa ra một số cách giải quyết) với: Chỉ phải thay đổi tên tài sản của tôi từ searchTextthành search.text, sau đó xác định $scope.search = {};đối tượng trống trong bộ điều khiển và voila ... Không biết tại sao nó hoạt động Tuy nhiên ;]

Bộ điều khiển như phiên bản (được khuyến nghị)

Đây là mẫu

<div ng-app="example" ng-controller="myController as $ctrl">
    <input type="text" ng-model="$ctrl.searchText" />
    <button ng-click="$ctrl.check()">Check!</button>
    {{ $ctrl.searchText }}
</div>

Mã thông báo

angular.module('example', [])
  .controller('myController', function() {
    var vm = this;
    vm.check = function () {
      console.log(vm.searchText);
    };
  });

Một ví dụ: http://codepen.io/Damax/pen/rjawoO

Tốt nhất sẽ là sử dụng thành phần với Angular 2.x hoặc Angular 1.5 trở lên

Cách cũ (KHÔNG nên dùng)

Điều này KHÔNG được khuyến khích vì một chuỗi là nguyên thủy, rất được khuyến khích sử dụng một đối tượng thay thế

Hãy thử điều này trong đánh dấu của bạn

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

và cái này trong bộ điều khiển của bạn

$scope.check = function (searchText) {
    console.log(searchText);
}

"Nếu bạn sử dụng ng-model, bạn phải có một dấu chấm ở đó."
Làm cho mô hình của bạn trỏ đến một object.property và bạn sẽ ổn.

Bộ điều khiển

$scope.formData = {};
$scope.check = function () {
  console.log($scope.formData.searchText.$modelValue); //works
}

Bản mẫu

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

Điều này xảy ra khi phạm vi trẻ em đang chơi - như các tuyến đường con hoặc lặp lại ng. Phạm vi con tạo ra giá trị riêng của nó và xung đột tên được sinh ra như được minh họa tại đây :

Xem video clip này để biết thêm: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

Trong Làm chủ phát triển ứng dụng web với cuốn sách AngularJS trang 19, người ta viết rằng

Tránh các ràng buộc trực tiếp đến các thuộc tính của phạm vi. Liên kết dữ liệu hai chiều với các thuộc tính của đối tượng (được hiển thị trên một phạm vi) là một cách tiếp cận ưa thích. Theo nguyên tắc thông thường, bạn nên có một dấu chấm trong biểu thức được cung cấp cho chỉ thị ng-model (ví dụ: ng-model = "thing.name").

Phạm vi chỉ là các đối tượng JavaScript và chúng bắt chước hệ thống phân cấp dom. Theo Kế thừa nguyên mẫu JavaScript , các thuộc tính phạm vi được phân tách thông qua các phạm vi. Để tránh điều này, ký hiệu chấm nên sử dụng để liên kết các mô hình ng.

Sử dụng thisthay vì $scopelàm việc.

function AppCtrl($scope){
  $scope.searchText = "";
  $scope.check = function () {
    console.log("You typed '" + this.searchText + "'"); // used 'this' instead of $scope
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="AppCtrl">
    <input ng-model="searchText"/>
    <button ng-click="check()">Write console log</button>
  </div>
</div>

Chỉnh sửa: Tại thời điểm viết câu trả lời này, tôi đã có tình huống phức tạp hơn nhiều so với điều này. Sau khi nhận xét, tôi đã cố gắng tái tạo nó để hiểu tại sao nó hoạt động, nhưng không có may mắn. Tôi nghĩ bằng cách nào đó (không thực sự biết tại sao) một phạm vi con mới được tạo ra và thisđề cập đến phạm vi đó. Nhưng nếu $scopeđược sử dụng, nó thực sự đề cập đến phạm vi $ cha vì tính năng phạm vi từ vựng của javascript .

Sẽ thật tuyệt nếu ai đó gặp vấn đề này kiểm tra theo cách này và thông báo cho chúng tôi.

Tôi gặp vấn đề tương tự và đó là do tôi không khai báo đối tượng trống trước ở đầu bộ điều khiển của mình:

$scope.model = {}

<input ng-model="model.firstProperty">

Hy vọng điều này sẽ làm việc cho bạn!

Tôi đã gặp một vấn đề tương tự khi xử lý một quan điểm không tầm thường (có phạm vi lồng nhau). Và cuối cùng phát hiện ra đây là một điều khó khăn đã biết khi phát triển ứng dụng AngularJS do bản chất của sự kế thừa dựa trên nguyên mẫu của java-script. Phạm vi lồng nhau AngularJS được tạo ra thông qua cơ chế này. Và giá trị được tạo từ mô hình ng được đặt trong phạm vi con, không nói phạm vi cha mẹ (có thể là phạm vi được chèn vào bộ điều khiển) sẽ không thấy giá trị, giá trị cũng sẽ che phủ bất kỳ thuộc tính nào có cùng tên được xác định trong phạm vi cha nếu không sử dụng dấu chấm để thực thi một truy cập tham chiếu nguyên mẫu. Để biết thêm chi tiết, hãy xem video trực tuyến cụ thể để minh họa vấn đề này, http://egghead.io/video/angularjs-the-dot/ và bình luận theo dõi nó.

Hãy xem fiddle này http://jsfiddle.net/ganarajpr/MSjqL/

Tôi đã (tôi giả sử!) Đã làm chính xác những gì bạn đang làm và nó dường như đang hoạt động. Bạn có thể kiểm tra những gì không làm việc ở đây cho bạn?

Vì không ai đề cập đến vấn đề này, vấn đề có thể được giải quyết bằng cách thêm $parentvào tài sản bị ràng buộc

<div ng-controller="LoginController">
    <input type="text" name="login" class="form-control" ng-model="$parent.ssn" ng-pattern="/\d{6,8}-\d{4}|\d{10,12}/" ng-required="true" />
    <button class="button-big" type="submit" ng-click="BankLogin()" ng-disabled="!bankidForm.login.$valid">Logga in</button>
</div>

Và bộ điều khiển

app.controller("LoginController", ['$scope', function ($scope) {
    $scope.ssn = '';

    $scope.BankLogin = function () {
        console.log($scope.ssn); // works!
    };
}]);

Đối với tôi, vấn đề đã được giải quyết bằng cách thả dữ liệu của tôi vào một đối tượng (ở đây là "dữ liệu").

NgApp.controller('MyController', function($scope) {

   $scope.my_title = ""; // This don't work in ng-click function called

   $scope.datas = {
      'my_title' : "",
   };

   $scope.doAction = function() {
         console.log($scope.my_title); // bad value
         console.log($scope.datas.my_title); // Good Value binded by'ng-model'
   }
   

});

Tôi hy vọng nó sẽ giúp

Tôi chỉ gặp vấn đề này khi sử dụng root_controll liên kết với phần tử body. Sau đó, tôi đã sử dụng ng-view với bộ định tuyến góc. Vấn đề là LUÔN LUÔN tạo ra một phạm vi mới khi nó chèn html vào phần tử ng-view. Kết quả là, chức năng "kiểm tra" của tôi đã được xác định trên phạm vi chính của phạm vi được sửa đổi bởi phần tử ng-model của tôi.

Để giải quyết vấn đề, chỉ cần sử dụng bộ điều khiển chuyên dụng trong nội dung html được tải tuyến.

Bạn có thể làm điều đó để cho phép tìm kiếm ng-keypressnhập văn bản đầu vào và trong ng-clickbiểu tượng:

<input type="text" ng-model="searchText" ng-keypress="keyEnter(this,$event)" />
<button ng-click="check(searchText)">Check!</button>

in the controller
$scope.search = function (searchText) {
        console.log(searchText);
    }
    $scope.keyEnter = function (serachText,$event) {
        var keyCode = $event.which || $event.keyCode;
        if (keyCode === 13) {//KeyCode for Enter key
           console.log(searchText);
        }
    }

Tôi đã từng gặp vấn đề tương tự.
Cách thích hợp sẽ là đặt 'searchText' thành một thuộc tính bên trong một đối tượng.

Nhưng nếu tôi muốn để nó như vậy, một chuỗi thì sao? tốt, tôi đã thử mọi phương pháp duy nhất được đề cập ở đây, không có gì hiệu quả.
Nhưng sau đó tôi nhận thấy rằng vấn đề chỉ nằm ở sự khởi đầu, vì vậy tôi chỉ cần đặt thuộc tính giá trị và nó đã hoạt động.

<input type="text" ng-model="searchText" value={{searchText}} />

Bằng cách này, giá trị chỉ được đặt thành giá trị '$ scope.searchText' và nó được cập nhật khi giá trị đầu vào thay đổi.

Tôi biết đó là một cách giải quyết, nhưng nó đã làm việc cho tôi ..

Tôi đã phải đối mặt với cùng một vấn đề ... Độ phân giải phù hợp với tôi là sử dụng từ khóa này ..........

cảnh báo (this.ModelName);