Vượt qua giá trị đầu vào cho bộ điều khiển khi nhập hoặc nhấn nút

Question

Tôi đang cố gắng bắt đầu học AngularJS cho ứng dụng Ionic mà tôi đang làm việc, và tôi gặp một chút khó khăn khi hiểu AngularJS đã có nhiều kinh nghiệm nhất về jQuery tập trung vào thao tác DOM thay vì tạo khung.

Nếu tôi có đánh dấu sau:

<label class="item-input-wrapper"> 
    <i class="icon ion-ios7-chatbubble placeholder-icon"></i> 
    <input type="text" placeholder="Send a message..."> 
</label> 
<button class="button button-clear button-positive"> 
    Send 
</button> 

Làm thế nào tôi có thể vượt qua giá trị của đầu vào với bộ điều khiển khi nhập hoặc gửi được nhấp? Tôi đang làm việc trên một ứng dụng trò chuyện, vì vậy tôi tin rằng một phương pháp tiếp cận mô hình là cần thiết để các chuỗi tin nhắn có thể được cập nhật tự động nhưng khác hơn là tôi không có ý tưởng.

Ai đó có thể giúp tôi hoặc ít nhất là chỉ cho tôi đúng hướng không?

Answer 1

Có một số cách để chuyển giá trị cho bộ điều khiển của bạn. Đây là ví dụ đơn giản nhất. Như Justin đã nói, bạn nên xem xét các khái niệm cơ bản về góc.

HTML:

<div ng-controller="MyCtrl"> 
    <input type="text" ng-model="foo" placeholder="Enter something" /> 
    <input type="button" ng-click="doSomething()" value="Send" ng-disabled="foo == null" /> 
</div> 

JS:

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.foo = null; 
    $scope.doSomething = function() { 
     alert("Hello, " + $scope.foo); 
    } 
} 

Đây là làm việc fiddle

Và tôi sẽ khuyên bạn đi qua post này.

Answer 2

Đánh dấu sau bạn đã đăng là chế độ xem. Những gì bạn cần làm là viết một kịch bản JS riêng biệt được gọi là một bộ điều khiển được liên kết với khung nhìn. Nhìn vào các hướng dẫn Angular cơ bản về cách thực hiện điều đó và chủ yếu xem xét cách $ scope hoạt động trong Angular.

điều khiển của bạn sẽ có một hàm ... nói:

$scope.foo = function(input) { alert(input); }; 

Từ quan điểm, bạn có thể vượt qua một giá trị vào bộ điều khiển với chức năng kiễu góc như ng nhấp chuột.

<a ng-click="foo('this string will be passed in as the text of the alert')">click me</a>