directive | 易学教程

How to inject a controller into a directive when unit-testing

阅读更多关于 How to inject a controller into a directive when unit-testing

问题 I want to test an AngularJS directive declared like this app.directive('myCustomer', function() { return { template: 'cust.html' controller: 'customerController' }; }); In the test I would like to inject (or override) the controller, so that I can test just the other parts of the directive (e.g. the template). The customerController can of course be tested separately. This way I get a clean separation of tests. I have tried overriding the controller by setting the controller property in the

How to inject a controller into a directive when unit-testing

阅读更多关于 How to inject a controller into a directive when unit-testing

vue 自定义指令 directive

阅读更多关于 vue 自定义指令 directive

vue自定义指令顾名思义，就是vue给我们提供的一个编写各种指令的入口。比如v-for,v-if ,v-show等，根据实际业务需求有时会用到自定义指令，一定程度上可以解决过滤器并承担部分组件功能的作用。但是总体而言，由于指令需要操作dom,因此能用组件就不用指令。言归正传：写一个v-focus <body> <div id="app"> <input type="text" v-focus > </div> <script> Vue.directive('focus',{ inserted:function(el){ el.focus() } }) var app = new Vue({ el:'#app' }) </script> </body> 当然指令可以很复杂，比如写一个v-time ,会自动将后端给我们的时间戳变为几前，几分钟前以及几小时前这种。封装time.js var Time = { // 当前时间戳 getUnix: function() { return new Date().getTime() }, // 今天0点时间戳 getTodayUnix: function() { var date = new Date() date.setHours(0); date.setMinutes(0); date.setMilliseconds(0); date

Prolog DCG set_prolog_flag double_quotes source code directive location matters; documentation?

阅读更多关于 Prolog DCG set_prolog_flag double_quotes source code directive location matters; documentation?

问题 I learned the hard way that with SWI-Prolog the location for the Prolog directive set_prolog_flag matters in a source code file. The only documentation I found of value about loading source code files with directives was in Loading Prolog source files A directive is an instruction to the compiler. Directives are used to set (predicate) properties (see section 4.15), set flags (see set_prolog_flag/2) and load files (this section). Directives are terms of the form :- <term>. Is there

AngularJS directive toggle menu preventing default for other directive

阅读更多关于 AngularJS directive toggle menu preventing default for other directive

问题 So I made a directive for a toggle (drop down) menu in AngularJS. I used the directive for multiple items within the page but I have a small problem. When one item is open and I click another one I want the previous one to close. The event.preventDefault and event.stopPropagation stops the event for the previous item and doesn't close it. Any ideas on how to fix this? Is there a way to perhaps only stop the event within the scope? app.directive('toggleMenu', function ($document) { return {

How to pass filter to a directive in AngularJS

阅读更多关于 How to pass filter to a directive in AngularJS

问题 I have a custom directive and I want to be able to pass a filter name to it. That filter will then be use in my template. Here is what I got so far: the directive: angular.module('forecastDirective', []) .directive('forecast', ['appConfig', function(appConfig) { return { templateUrl: appConfig.directivesRoot + 'templates/forecast.html', replace: true, scope: { weatherObject: "=", convertToDate: "&", filterTemp: "@", dateFormat: "@", }, } }]); The template: <div class="panel panel-default">

Angular2 triggering Host listeners on a button click

阅读更多关于 Angular2 triggering Host listeners on a button click

问题 I need to trigger Host listeners after a click of a certain button. The host listeners should then highlight any hovered element on page and listen to mouse clicks which would open a modal. Problem is that when I start listening for mouse clicks and do click, the modal sometimes doesn't open until I click the button that triggers the Host listeners. Also the highlighted elements get 'stuck' and stay highlighted after a mouse click trying to open a modal. Is it an asynchronous problem? Any

Angular2 triggering Host listeners on a button click

阅读更多关于 Angular2 triggering Host listeners on a button click

[Angular Directive] Write a Structural Directive in Angular 2

阅读更多关于 [Angular Directive] Write a Structural Directive in Angular 2

Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template> elements, but they're easy and extremely powerful once you undrestand the concepts. What is stuctural looks like: <h1 *structure>This is structure directive</h1>  <template structure> <h1>This is structure directive</h1> </template> So Structural Directive is just something shorthand for template. import {Directive, TemplateRef, ElementRef, ViewContainerRef, Input} from '@angular/core'; @Directive({ selector: '

AngularJS ng-model form driven by ng-repeat over UI model description data how to?

阅读更多关于 AngularJS ng-model form driven by ng-repeat over UI model description data how to?

问题 The JSFiddle http://jsfiddle.net/vorburger/hyCTA/3/ illustrates a (working) "UI modeling" idea I had with AngularJS; note the form is not actually coded out in the HTML template, it's driven by uimodel JSON (which in turn describes how the datamodel is to be rendered/edited): <div ng-repeat="auimodel in uimodel"> <label>{{$index + 1}}. {{auimodel.label}}</label> <input ng-model="datamodel[auimodel.model]" type="{{auimodel.type}}" /> </div> Trouble is, as soon as my 'model' isn't a simple