2. 程式人生 > >angularjs中的雙向資料繫結的demo

angularjs中的雙向資料繫結的demo

阿新 • • 發佈：2019-01-16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .container{
            
            width:960px;
            margin:0 auto;
            
            }
            
            .editor{
            margin-right:360px;
            border:1px outset black;
            height:300px;
            padding:30px;
            }
            .preview{
            padding:30px;
            float:right;width:300px;
            border:1px inset grey;
            height:300px;
            }
        </style>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div class='container' ng-app="editor">
            <div class="preview">{{content }}</div>
            <div class='editor' contenteditable="true" ng-model="content"></div>
        </div>
        <script type="text/javascript">
            var app = angular.module('editor', []);
            
            
            app.directive('contenteditable', function() {
              return {
                require: 'ngModel',
                link: function(scope, element, attrs, ctrl) {
               
                  element.bind('keyup', function() {
                    scope.$apply(function() {
                      var html=element.html();
            
                      ctrl.$setViewValue(html);
                    });
                  });
            
                }
              };
            });
        </script>
    </body>

</html>

相關推薦

3、AngularJs的雙向資料繫結

1、AngularJs的指令系統 • ng-app • ng-controller 2、AngularJs的雙向資料繫結           • MVVM       • $timeout    

vue的思中雙向資料繫結的原理

我們在面試中經常會被問道什麼是mvc 什麼是 mvvm  還有雙向資料繫結的原理：MVC：對專案的整體把控,M代表的是資料庫中的資料,V代表的是前端的檢視層，C用於處理M和V之間進行互動的業務邏輯(業務

angularjs中的雙向資料繫結的demo

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <style type="text/css">           

AngularJs 在ng-repeat中動態使用ng-model進行雙向資料繫結

首先說明一下功能需求： 當點選一次增加按鈕的時候，下方就會多一行輸入框； 當點選一次刪除按鈕的時候，所點選的刪除按鈕那行的輸入框會消失； 當點選列印資訊按鈕的時候，把所有輸入框中的資料讀取出來，並列印到控制檯上。 由此可看出，帶有刪除按鈕的這部分DIV是動態的。

從一段.html程式碼說起談談AngularJs中的雙向資料繫結

<!DOCTYPE html> <html lang="en" ng-app> <--省略head部分程式碼—> <body> input1： <input type="text" ng-model='message'

vue中實現雙向資料繫結原理,使用了Object.defineproperty()方法,方法簡單

在vue中雙向資料繫結原理,我們一般都是用v-model來實現的 ,但一般在面試話會問到其實現的原理, 方法比較簡單,就是利用了es5中的一個方法.Object.defineproperty(),它有三個引數, Object.defineproperty(obj,'val',attrObject), 引數

Vue元件中利用.sync修飾符實現對prop進行雙向資料繫結

在有些情況下，我們可能需要對一個 prop 進行“雙向繫結”。不幸的是，真正的雙向繫結會帶來維護上的問題，因為子元件可以修改父元件，且在父元件和子元件都沒有明顯的改動來源。 所以官方推薦以update:my-prop-name 的模式觸發事件取而代之 為了好理解，我寫了一

理解angular2.0雙向資料繫結中的 $event

app/hero-form.component.html (excerpt) COPY CODE <inputtype="text"class="form-control"id="name

JS學習筆記——AngularJS 1.x雙向資料繫結機制

0.前言 AngularJS和vueJS是前端比較熱門的兩個框架，AngularJS 1.x是我第一個接觸的框架，雙向繫結是其最大的特點，我們從原生JS的角度看看，這個雙向資料繫結是如何實現的。點這裡看vueJS的雙向繫結原理。 1.簡單的雙向繫結實現

簡要理解vue的mvvm模式中的雙向資料繫結

mvvm（Model-View-ViewModel）模式： 由檢視(View)、檢視模型(ViewModel)、模型(Model)三部分組成，結構如下圖。 通過這三部分實現UI邏輯、呈現邏輯和狀態控制、資料與業務邏輯的分離。 使用MVVM模式有幾大好處

angularjs雙向資料繫結原理

angular並不存在定時髒檢測。angular對常用的dom事件，xhr事件等做了封裝， 在裡面觸發進入angular的digest流程。在digest流程裡面， 會從rootscope開始遍歷，

雙向資料繫結---AngularJS的基本原理學習

Angular JS (Angular.JS) 是一組用來開發Web頁面的框架、模板以及資料繫結和豐富UI元件。它支援整個開發程序，提供web應用的架構，無需進行手工DOM操作。 AngularJS很小，只有60K，相容主流瀏覽器，與 jQuery 配合良好。雙向資料繫結

angularjs雙向資料繫結原理解析

angularjs的雙向資料繫結 髒值（發生了變化的值）檢查不等於定時輪詢，而是特定事件觸發才會執行 只有指定事件觸發後才會進入髒值輪詢。 - DOM事件，譬如使用者輸入文字，點選按鈕等。(ng-click) - XHR(ajax)響應事件 (http)

AngularJs——雙向資料繫結示例

       最近在做Hybird App,接觸到了AngularJs,感覺用起來蠻爽的，今天share下AngularJs的核心功能之一：雙向資料繫結。       我們在頁面中加入一個表單：<!DOCTYPE html> <html ng-app="us

AngularJS核心特性——雙向資料繫結

一 單向資料繫結 目前大多數前端框架都是單向資料繫結：JQuery、BackBone、Flex。模型發生了變化，檢視也隨之變化。 二 雙向資料繫結 一旦檢視發生了變化，模型也會發生變化。

JS中的雙向資料繫結及Object.defineProperty方法

緣起前幾天在看一些流行的迷你mvvm框架（比如avalon.js、 vue.js 這種較輕的框架，而非Angularjs、Emberjs這種較重的框架）的實現。現代流行的mvvm框架一般都會將資料雙向繫結（two-ways data binding）做掉，作為框架自

面試題：你能寫一個Vue的雙向資料繫結嗎？

在目前的前端面試中，vue的雙向資料繫結已經成為了一個非常容易考到的點，即使不能當場寫出來，至少也要能說出原理。本篇文章中我將會仿照vue寫一個雙向資料繫結的例項，名字就叫myVue吧。結合註釋，希望能讓大家有所收穫。 1、原理 Vue的雙向資料繫結的原理相信大家也都十分了解了，主要是通過 Obje

雙向資料繫結實現之Object.defineProperty

vue.js利用的是es5的 defineproperty 特性實現的雙向資料繫結，瞭解一下基本原理。 舉例 var person= {}; Object.defineProperty(person, "name", { v

WPF雙向資料繫結總結

1、指定繫結源 WPF雙向資料同步：目標屬性（UI）和源屬性（CS）資料同步。 實現雙向資料同步資料來源需要實現依賴屬性INotifyPropertyChanged介面，因為依賴屬性有垂直的內嵌變更通知機制。 INotifyPropertyChanged是用於實現介面通知。DependencyObjec

轉 vue實現雙向資料繫結之原理及實現篇 vue的雙向繫結原理及實現

轉自：canfoo#! vue的雙向繫結原理及實現 前言 先上個成果圖來吸引各位： 程式碼：                          &nb