directive | 易学教程

Changing the default name of “router-link-active” class by writing a custom directive that adds new class

阅读更多关于 Changing the default name of “router-link-active” class by writing a custom directive that adds new class

问题 I would like to use Semantic UI in my Angular2 application. The problem is that I can't find a router setting that changes the default name of "router-link-active" class. I need it to be called just "active" to make menus display properly. As I understand, such setting doesn't exist. I've seen it in Vue.JS so I expect it to be there too. Is it a good idea to ask developers to fix this? So. We need to write a custom directive that adds "active" class to all DOM elements with "router-link

What are the benefits of a directive template function in Angularjs?

阅读更多关于 What are the benefits of a directive template function in Angularjs?

问题 According to the documentation a template can be a function which takes two parameters, an element and attributes and returns a string value representing the template. It replaces the current element with the contents of the HTML. The replacement process migrates all of the attributes and classes from the old element to the new one. The compile function deals with transforming the template DOM. It takes three parameters, an element , attributes and transclude function. The transclude

Understanding AngularJS ng-src

阅读更多关于 Understanding AngularJS ng-src

问题 As explained here, the angularjs directive ng-src is used to prevent the browser from loading the resource (e.g. image) before the handlebars get parsed. I'm currently using the following code: <div ng-controller="MyCtrl"> <img ng-src="http://localhost:8081/media/{{ path }}" /> </div> With the following JS: function MyCtrl($scope, $timeout) { $timeout(function () { $scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png'; }, 1000); }; The path is being retrieved from a webservice.

AngularJS - Create a directive that uses ng-model

阅读更多关于 AngularJS - Create a directive that uses ng-model

问题 I am trying to create a directive that would create an input field with the same ng-model as the element that creates the directive. Here's what I came up with so far: HTML <!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"> <title>AngularJS Plunker</title> <link rel="stylesheet" href="style.css"> <script>document.write("<base href=\"" + document.location + "\" />");</script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script

现代前端库开发指南系列（二）：使用 webpack 构建一个库

阅读更多关于现代前端库开发指南系列（二）：使用 webpack 构建一个库

前言在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。输出产物构建一个库与构建一个一般应用最大的不同点在于构建完成后输出的产物。一般应用构建完成后会输出：一个 html 文件一个 js 入口 chunk 、若干子 chunk 若干 css 文件若干其它资源，如图片、字体文件等虽然输出的资源非常多，但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了，换句话说，这个 html 文件实际上就是整个应用的入口。一个库构建完成后会输出：一个 CommonJS 格式的 js 文件一个未压缩的 UMD 格式的 js 文件一个已压缩的 UMD 格式的 js 文件可能包括若干的 css 文件可能包括若干的其它资源文件库的入口分别是上面罗列的 js 文件；你可能会奇怪，一个库怎么会有3个入口文件呢？莫急，且听我一一道来。 CommonJS CommonJS 是 Node.js 推行的一种模块化规范，主要语法包括 module.exports 、 require() 等；而我们在使用 webpack 引入 npm 包时，实际上是处于 Node.js 环境，由此可知，这个 CommonJS 格式的入口 js 文件

Scope's eval returns undefined in an AngularJS directive

阅读更多关于 Scope's eval returns undefined in an AngularJS directive

问题 Background: I'm trying to run a callback when something inside the code of a directive in AngularJS happen. Pertinent code: HTML: <img-cropper onselect="updateAvatarData" x="100" y="100" src="{{tempAvatar}}" id="avatarCropper"/> Controller: $scope.updateAvatarData = function(c){ alert("¡¡¡Funciona!!!!"); }; Directive: <<more code up here>> link: function(scope,element, attr) { scope.wsId = attr.id+'WS'; scope.pvId = attr.id+'preview'; scope.x = attr.x; scope.y = attr.y; scope.aspectRatio =

AngularJS directive for a multi-select

阅读更多关于 AngularJS directive for a multi-select

问题 I am having trouble populating my multi-select. I am using this version of the multi-select http://davidstutz.github.io/bootstrap-multiselect/ I have looked at this stack overflow page (How can I use Bootstrap Multiselect Dropdown in AngularJS) but I am still having problems. I am trying to populate my multi-select with data that I grab from a database which gets stored in provData. Here is my html: <div class="col-sm-8"> <select class="form-control" multiple ht-multi-select ng-model="patient

Set templateUrl base on attribute in directive

阅读更多关于 Set templateUrl base on attribute in directive

问题 I'm working on a set of angular directives and I want to load the correct template based on the presence or value of an attribute. <my-form horizontal> </my-form> <my-form vertical> </my-form> If horizontal, templateUrl should be /partials/horizontal-form and If vertical, templateUrl should be /partials/vertical-form I'm interested in the templateUrl because I can't use template since the html depends on the attributes. In the compile.pre function, the html has already been loaded. If there

Angular iFrame methods

阅读更多关于 Angular iFrame methods

问题 I'm trying to make an Angular directive to wrap an iFrame. Because IE 11 doesn't support the srcdoc attribute I looked for a different way to fill the iFrame: angular .module('angularApp') .directive('easyframe', easyframe); function easyframe() { return { restrict: 'E', scope: {content: '='}, replace: true, template: '<iframe id="easyframe" width="100%"></iframe>', controller: function ($sce, $scope, $element) { $scope.$watch('content', function () { var content = $sce.trustAsHtml($scope

AngularJS SVG Path directive

阅读更多关于 AngularJS SVG Path directive

问题 Bit of a short question, but wondering why this is happening: In the example posted below, there are two SVG elements, each containing a directive assigned to a element. The first directive doesn't use a template, and is the setup I currently use to assign actions to paths. The second directive is what I was trying to do in order to clean up my code a bit, but it won't be drawn. I googled a bit around, and read there is a difference between SVG & DOM nodes? But since both ng-repeat's are