AngularJS 示例:文本框

2018-07-26 17:21 更新

这个例子与官网上的那个例子相似。最终是要显示一个文本框,这个文本框由标题和内容两部分组成。

而且标题和内容则是引用 controller 中的变量值。

HTML 部分的代码:

<div ng-controller="TestCtrl">
  <ys-block title="title" text="text"></ys-block>
  <p>标题: <input ng-model="title" /></p>
  <p>内容: <input ng-model="text" /></p>
  <ys-block title="title" text="text"></ys-block>
</div>

从这个期望实现效果的 HTML 代码中,我们可以考虑设计指令的实现方式:

  • 这个指令的使用方式是“标签”, 即 restrict 这个参数应该设置为 E 。
  • 节点的属性值是对 controller 变量的引用,那么我们应该在指令的 scope 中使用 = 的方式来指定成员值。
  • 最终的效果显示需要进行 DOM 结构的重构,那直接使用 template 就好了。
  • 自定义的标签在最终效果中是多余的,所有 replace 应该设置为 true 。

JS 部分的代码:

var app = angular.module('Demo', [], angular.noop);

app.directive('ysBlock', function(){
  return {compile: angular.noop,
          template: '<div style="width: 200px; border: 1px solid black;">' + 
                     '<h1 style="background-color: gray; color: white; font-size: 22px;">' + 
                     '{{ title }}' + '</h1><div>{{ text }}</div></div>',
          replace: true,
          scope: {title: '=title', text: '=text'},
          restrict: 'E'};
});

app.controller('TestCtrl', function($scope){
  $scope.title = '标题在这里';
  $scope.text = '内容在这里';
});

angular.bootstrap(document, ['Demo']);

可以看到,这种简单的组件式指令,只需要作 DOM 结构的变换即可实现,连 compile 函数都不需要写。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号