In this angular document: http://docs.angularjs.org/guide/concepts, there is an example about Directives.
在这个有角度的文档中:http://docs.angularjs.org/guide/concepts,有一个关于Directives的例子。
Directives
A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute, element name, or a class name. A directive allows you to extend the HTML vocabulary in a declarative fashion. Following is an example which enables data-binding for the contenteditable in HTML.
指令是一种行为或DOM转换,它由自定义属性,元素名称或类名称的触发器触发。指令允许您以声明方式扩展HTML词汇表。以下是一个示例,它为HTML中的contenteditable启用数据绑定。
It provides two live demo, one for plunker, another for jsfiddle.
它提供了两个现场演示,一个用于plunker,另一个用于jsfiddle。
- plunker: http://plnkr.co/edit/nsAUafYFA1tHPo52TWUm?p=preview
- jsfiddle: http://jsfiddle.net/rnL84/
Why the jsfiddle one works well but the plunker one doesn't work? They have exactly the same code, and there is no error in the console.
为什么jsfiddle一个运作良好,但是一个不起作用?它们具有完全相同的代码,并且控制台中没有错误。
2 个解决方案
#1
3
The plunker has ng-app instead of ng-app='directive' in the index.html.
plunker在index.html中使用ng-app而不是ng-app ='directive'。
The module (named directive in this example) defined in the script.js javascript file needs to be specified in the ng-app for it to pick up the contenteditable directive:
需要在ng-app中指定script.js javascript文件中定义的模块(本例中为named指令),以便它获取contenteditable指令:
angular.module('directive', [])...
See this plunker for a working version.
请参阅此plunker了解工作版本。
#2
5
Replace the script provided by Plunker with
替换Plunker提供的脚本
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
#1
3
The plunker has ng-app instead of ng-app='directive' in the index.html.
plunker在index.html中使用ng-app而不是ng-app ='directive'。
The module (named directive in this example) defined in the script.js javascript file needs to be specified in the ng-app for it to pick up the contenteditable directive:
需要在ng-app中指定script.js javascript文件中定义的模块(本例中为named指令),以便它获取contenteditable指令:
angular.module('directive', [])...
See this plunker for a working version.
请参阅此plunker了解工作版本。
#2
5
Replace the script provided by Plunker with
替换Plunker提供的脚本
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>