angularJS contenteditable 指令双向绑定

项目遇到需求有点奇葩:双击div使其可编辑,失去焦点后进行数据绑定

通过自定义指令完成

好了上代码:

.directive(‘contentEditable‘, function() {
              return {
                require: ‘ngModel‘,
                link: function(scope, element, attrs, ctrl) {
                    debugger
                  // view -> model
                  element.bind(‘dblclick‘, function () {
                    if (!attrs.contenteditable) {
                        attrs.$set(‘contenteditable‘, true);
                        element[0].focus();
                    }
                  });
                  element.bind(‘blur‘, function() {
                    attrs.$set(‘contenteditable‘, false);
                    scope.$apply(function() {
                      ctrl.$setViewValue(element.html());
                    });
                  });

                  // model -> view
                  ctrl.$render = function() {
                    element.html(ctrl.$viewValue);
                  };
                }
              };
            })

参考站点:https://segmentfault.com/q/1010000003727922?_ea=348533

时间: 2024-12-14 10:36:06

angularJS contenteditable 指令双向绑定的相关文章

AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <opti

angularjs系列之双向绑定

把之前学到ng的一些东西和大家分享一下.首先要讲的就是ng最重要的一个特性,双向绑定.(angular源码全部是1.5.0版本) 那么一个双向绑定的代码是什么样子.来看ng官网上的例子,代码就是这么简单. <script> angular.module('bindExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.test = 'Whirled'; $scope.testFn =

angularjs的数据双向绑定怎么实现的?

一. 单向绑定(ng-bind)和双向绑定(ng-model)的区别: 1.ng-bind 单向数据绑定($scope->view),用于数据显示,简写形式,{{}}. <span ng-bind="val"></span> <span>{{val}}</span> 而这两者的区别,在于页面没有加载完毕时,{{val}}会直接显示到页面,直到angular渲染该绑定数据,这种写法可能将{{val}}让用户看到:而ng-bind则在a

AngularJS数据双向绑定

AngularJS是近些年流行的前端语言,通过新的属性和表达式扩展了HTML,克服了HTML在构建应用上的不足.Angular声明式的模板功能强大,自带了丰富的指令,是一个完善的前端MVVM框架,实现了数据双向绑定.过滤器.依赖注入.模块化.服务等功能.AngularJS实现数据双向绑定分别表现在与浏览器交互和与用户交互. 1.1.1 AugularJS与浏览器交互 当浏览器访问到AngularJS脚本时,浏览器做了如下操作: 加载html,对DOM进行解析: 加载angularJS脚本: An

AngularJS自定义指令详解(有分页插件代码)

前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

玩转angularJs——通过自定义ng-model,不仅仅只是input可以有双向绑定

angularJs双向绑定特性在开发中很方便很实用,但是由于ng-model一般只能挂在input上,因此我们需要自定义ng-model来在div等元素上使用该标签. 自定义指令: 1 //自定义ngModel的属性 2 .directive('contenteditable', ['$window', function() { 3 return { 4 restrict: 'A', 5 require: '?ngModel', // 此指令所代替的函数 6 link: function(sco

深入学习AngularJS中数据的双向绑定机制

来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中,

angularjs培训之重新理解双向绑定和事件详解

双向绑定是angularjs亮点之一,在前面的<angularjs培训之helloworld>篇中大概介绍了下双向绑定,现在我们"旧事重提",先看下下面的代码片段: view中:  <input type='button' ng-click="set()" value="set Value">  <input type="text" ng-model='userName2'> control

AngularJS学习笔记(三)数据双向绑定

双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠结其中不明白的地方,先来体验下数据绑定的效果. 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="tex