$(document).ready(function() {
var apiRevoSlider = $('.tp-banner').show().revolution(
{
dottedOverlay:"none",
delay:9000,
startwidth:1140,
startheight:700,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:3,
navigationType:"none",
navigationArrows:"solo",
navigationStyle:"preview1",
touchenabled:"on",
onHoverStop:"on",
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
parallax:"mouse",
parallaxBgFreeze:"on",
parallaxLevels:[8,7,6,5,4,3,2,1],
parallaxDisableOnMobile:"on",
keyboardNavigation:"on",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
fullWidth:"off",
fullScreen:"on",
spinner:"spinner3",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
forceFullWidth:"off",
fullScreenAlignForce:"off",
minFullScreenHeight:"400",
hideThumbsOnMobile:"off",
hideNavDelayOnMobile:1500,
hideBulletsOnMobile:"off",
hideArrowsOnMobile:"off",
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
fullScreenOffsetContainer: ".header"
});
apiRevoSlider.bind("revolution.slide.onchange",function (e,data) {
if( $(window).width() > 992 ) {
if( $('#slider ul > li').eq(data.slideIndex-1).hasClass('light') ){
$('#header:not(.sticky-header)').addClass('light');
} else {
$('#header:not(.sticky-header)').removeClass('light');
}
MINOVATE.header.chooseLogo();
}
});
}); //ready
That may help you, btw if you had searched a bit you would have found it
/**
* Sample Directive
*/
define(['sampleLink', 'sampleCtrl'], function (link, controller) {
function sampleDir () {
return {
/**
* require is used by the link option
* can be a single controller, or an array. '^myController', or ['^controller2', '^controller1']
* controllers to be used in the link section. link (scope, element, attrs, requires)
*
* '^myController' - use ^ to search up the parents for the controller, otherwise it only looks at it's own element and will throw an error
* */
require : '',
/* restrict what type of elements this directive is rendered on E=element <directive> or A=attribute <element data-directive> */
restrict : 'EA',
/* *
* transclude in or outer scope. true = use the outer scope that this directive belongs to. false = create a scope inside the directive
* only use true when you want to create a directive that wraps arbitrary content
* when you use false and create a scope, you will want to pass in scope, or data through attributes on the element
* */
transclude : false,
/* *
* scope = create an isolate scope for the directive pass data into the directive through attributes
* This allows us to isolate the scope and reuse these directives throughout an app.
* =attr means to bind data to that attribute
* &attr means with transclude turned on this attribute will trigger evaluation of an expression in the context of the original scope
* any expression is allowed, including a function, this is ideal for binding callback functions to directive behaviors
* use this when we want the directive to expose an API for binding behaviors
* */
scope : {
inputObject : '=inputObject',
/*'close' : '&onClose'*/
},
/* templateUrl = Point to the template this directive should render */
templateUrl : '/a/tpl/modules/util/input/inputs.html',
/**
* link : use link when you want to manipulate the dom with the directive
* takes a function, inline or it can be dependency injected through requireJS
* use the following signature function lin k(scope, element, attrs) { ... }
*
* scope is an angular scope object
* element is the jqLite wrapped element that this directive matches
* attrs is a hash object with key-value pairs of normalized attribute names and their values
* */
link : link,
/**
* Specify a controller, and use controllerAs to alias the scope, if you want to reference the scope or it's functions in the template.
* You must define scope in the directive for this to be used.
*
* Q: What's the difference between controller and link? - A: Controllers can expose an API, and link can interact with controllers using require
*
* Best Practice: Only use controller when you want to expose the directive controller to another directive. Otherwise use Link
*
* This is great for building complicated directives that are made up of other directives and need to communicate with one another.
* */
controller : controller
/*controllerAs : 'input'*/
}
}
return sampleDir;
});
Related
I want to navigate from one page to another and jump directly to one control in the middle of the destination page. Normally, we can use a hashtag "#" follow with the name or ID of the control.
However, this method does work that well in Angular 2. I have tried method like
Angular2 Routing with Hashtag to page anchor. With that method, the url does end with "#myId" but the page doesn't actually jump.
Do we have other ways to achive this?
Angular documentation project has AutoScrollService service. You can try to use it. auto-scroll.service.ts
/**
* A service that supports automatically scrolling elements into view
*/
#Injectable()
export class AutoScrollService {
constructor(
#Inject(DOCUMENT) private document: any,
private location: PlatformLocation) { }
/**
* Scroll to the element with id extracted from the current location hash fragment
* Scroll to top if no hash
* Don't scroll if hash not found
*/
scroll() {
const hash = this.getCurrentHash();
const element: HTMLElement = hash
? this.document.getElementById(hash)
: this.document.getElementById('top-of-page') || this.document.body;
if (element) {
element.scrollIntoView();
if (window && window.scrollBy) { window.scrollBy(0, -80); }
}
}
/**
* We can get the hash fragment from the `PlatformLocation` but
* it needs the `#` char removing from the front.
*/
private getCurrentHash() {
return this.location.hash.replace(/^#/, '');
}
}
My code:
// View/Activities/index.ctp
...
<div>
<?php echo $this->requestAction('/Activities/ajax_list/'.$categoryId,['return']);?>
</div>
...
//View/Activitest/ajax_list.ctp
....
<?php echo $this -> Html -> image("/img/add1.jpg"); ?>
...
<?php echo $this->Html->link('add_project', array('controller'=>'projects', 'action'=>'add', $categoryId)); ?>
....
I want to include the view 'ajax_list' into the 'index',and it has been displayed but the url of image and link was wrong.
Then I debug the Cake/Routing/RequestActionTrait.php , "requestAction" function I find "$request = new Request($params);" the $request->base , $request->webroot are null.
Could some one tell me how should I fix it?
The $base/$webroot properties not being set in the new request might be considered a bug, or maybe the docs are just missing a proper example solution, I can't tell for sure, you might want to report this over at GitHub and see what the devs say.
Use view cells instead of requestAction()!
Whenever applicable you're better off using view cells instead of requesting actions, as they avoid all the overhead that comes with dispatching a new request.
See Cookbook > Views > View Cells
No models involved? Use elements!
In case no models are involed, and all you are doing is generating HTML, then you could simply use elements.
See Cookbook > Views > Elements
Fixing requestAction()
A possible workaround would be to use a dispatcher filter that fills the empty $base/$webroot properties with the necessary values, something like
src/Routing/Filter/RequestFilterFix.php
namespace App\Routing\Filter;
use Cake\Event\Event;
use Cake\Routing\DispatcherFilter;
class RequestFixFilter extends DispatcherFilter
{
public function beforeDispatch(Event $event)
{
$request = $event->data['request'];
/* #var $request \Cake\Network\Request */
if ($request->param('requested')) {
$request->base = '/pro';
$request->webroot = '/pro/';
$request->here = $request->base . $request->here;
}
}
}
config/bootstrap.php
// ...
// Load the filter before any other filters.
// Must at least be loaded before the `Routing` filter.
DispatcherFactory::add('RequestFix');
DispatcherFactory::add('Asset');
DispatcherFactory::add('Routing');
DispatcherFactory::add('ControllerFactory');
// ...
See also Cookbook > Routing > Dispatcher Filters > Building a Filter
I wanted to add jsdoc annotations to my AngularJS codes, so i tried :
PageFactory.js
/**
* Creates an instance of PageFactory.
*
* #constructor
* #this {PageFactory}
*
*/
function PageFactory() {
}
angular.module ( 'app' ).factory ('PageFactory', PageFactory);
The above works fine and produces the expected jsdoc output. But when i enclose this codes in an anonymous function like this :
PageFactory.js
(function (){
/**
* Creates an instance of PageFactory.
*
* #constructor
* #this {PageFactory}
*
*/
function PageFactory() {
}
angular.module ( 'app' ).factory ('PageFactory', PageFactory);
})();
The generated jsdoc html output is blank and no documentation on PageFactory class.
Is theres a way to make jsdoc work with anonymous functions or to work with my second code?
Thanks in advance.
Use #lends <global> like this:
(/** #lends <global> */ function (){
// etc... the rest remains the same.
I created a directive with a method that should be called from other elements that are not part of the directive. However it looks like this method is not exposed.
Some example jade code to clarify:
//- a controller for the view itself
div(ng-controller="someController")
//- this is part of the view itself, not within the directive
div(ng-repeat="element in elements")
div(ng-click="methodFromDirective(element)") click element {{$index}} to trigger directive
//- this is the directive
div(some-directive)
The someController isn't too important here I think. It has methods but NOT the methodFromDirective(element) one. The methodFromDirective(element) is a method that exists only in the directive.
If I make a directive and put some logging on creation I can clearly see it's created. However the methodFromDirective(element) method isn't exposed so the calls aren't properly triggered.
The methodFromDirective(element) itself will only work on elements from within the directive's template.
some coffeescript to show the definition of the the directive (ignore indentation errors here):
'use strict'
define [], () ->
someDirective = () ->
restrict: 'A'
scope: {
show: '='
}
transclude: false
templateUrl: 'someTemplateHere.html'
controller = ($scope) ->
# exposing the method here
$scope.methodFromDirective(element)->
$scope.theMethod element
link = (scope, element, attr) ->
# this is logged
console.log "init someDirective"
# triggering this method form outside fails
scope.theMethod = (element)->
console.log "method triggered with element", JSON.stringify(element)
I found my issue.
From the angularJS documentation on directives I was looking into the transclude option since that states:
What does this transclude option do, exactly? transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside.
I combined transclude=false with the controller function since that exposes the method, again from docs:
Savvy readers may be wondering what the difference is between link and controller. The basic difference is that controller can expose an API, and link functions can interact with controllers using require.
However what I missed completely was that I isolated scope within my directive. From docs:
What we want to be able to do is separate the scope inside a directive from the scope outside, and then map the outer scope to a directive's inner scope. We can do this by creating what we call an isolate scope. To do this, we can use a directive's scope option:
So even if you use transclude=false and the controller function you'll still fail to expose methods if you use isolated scope! Lesson learned!
While figuring out what went wrong I also made a fiddle for better understanding: http://jsfiddle.net/qyBEr/1/
html
<div ng-app="directiveScopeExample">
<div ng-controller="Ctrl1">
<p>see if we can trigger a method form the controller that exists in the directive.</p>
<ul>
<li>Method in Controller</li>
<li>Method in Directive</li>
</ul>
<simple-directive/>
</div>
</div>
javascript
angular.module('directiveScopeExample', [])
.controller('Ctrl1', function Ctrl1($scope) {
$scope.methodInController = function(){
alert('Method in controller triggered');
};
})
.directive('simpleDirective', function(){
return {
restrict: 'E',
transclude: false,
controller: function($scope){
$scope.methodInDirective = function(){
// call a method that is defined on scope but only within the directive, this is exposed beause defined within the link function on the $scope
$scope.showMessage('Method in directive triggered');
}
}
// this is the issue, creating a new scope prevents the controller to call the methods from the directive
//, scope: {
// title: '#'
//}
, link: function(scope, element, attrs, tabsCtrl) {
// view related code here
scope.showMessage = function(message){
alert(message);
}
},
//templateUrl: 'some-template-here.html'
};
})
Calling private methods inside directive's link function is very simple
dropOffScope = $('#drop_off_date').scope();
dropOffScope.setMinDate('11/10/2014');
where
$('#drop_off_date') - jQuery function
setMinDate() - private function inside directive
You can call directive function even from outer space.
By default the scope on directive is false meaning directive will use the parent's scope instead of creating a new one. And hence any function or model defined in the directive will be accessible in the parent scope. Check out this.
I think your problem can be solved as follows:
angular.module('directiveScopeExample', [])
.controller('Ctrl1', function Ctrl1($scope) {
$scope.methodInController = function(){
alert('Method in controller triggered');
};
})
.directive('simpleDirective', function(){
return {
restrict: 'E',
scope: false,
link: function(scope, element, attrs, tabsCtrl) {
// view related code here
scope.showMessage = function(message){
alert(message);
}
},
//templateUrl: 'some-template-here.html'
};
This approach might be an issue in case you want to create reusable directives and you are maintaining some state/models in your directive scope. But since you are just creating functions without side-effects, you should be fine.
This question is similiar to them one asked in Mike's post Using ng-model within a directive.
I am writing a page which is small spreadsheet that displays calculated output based on user input fields. Using a directive, I'm making custom tags like this:
<wbcalc item="var1" title="Variable 1" type="input"></wbcalc>
<wbcalc item="var2" title="Variable 2" type="input"></wbcalc>
<wbcalc item="calc" title="Calculation" type="calc"></wbcalc>
The 'item' field references scoped data in my controller:
$scope.var1 = '5'; // pre-entered input
$scope.var2 = '10'; // pre-entered input
$scope.calc = function() {
return parseInt($scope.var1) + parseInt($scope.var2);
};
And the 'type' field is used in the directive's logic to know whether to treat the item as a string or a function.
Here's a fiddle for this: http://jsfiddle.net/gregsandell/PTkms/3/ I can get the output elements to work with the astonishing line of code:
html.append(angular.element("<span>")
.html(scope.$eval(attrs.item + "()"))
);
...and I'm using this to get my inputs connected to my scoped controller data (I got this from Mike's post:
var input = angular.element("<input>").attr("ng-model", attrs.item);
$compile(input)(scope);
html.append(input);
...while it does put the values in the fields, they aren't bound to the calculation, as you can see by changing inputs in my fiddle.
Is there a better and/or more intuitive way to link my controller-scoped data to the jqlite-generated html in my directive?
Take a look at this, I think you can simplify the process a fair bit.
http://jsfiddle.net/PTkms/4/
angular.module('calculator', []).directive('wbcalc', function($compile) {
return {
restrict: 'E',
template: '<div><div class="span2">{{title}}</div><input ng-model="item"></div>',
scope: {
title: '#',
item: '='
},
link: function(scope, element, attrs) {
// Don't need to do this.
}
}
});
function calcCtrl($scope) {
$scope.var1 = '5';
$scope.var2 = '10';
$scope.calc = function() {
// Yes, this is a very simple calculation which could
// have been handled in the html with {{0 + var1 + var2}}.
// But in the real app the calculations will be more
// complicated formulae that don't belong in the html.
return parseInt($scope.var1) + parseInt($scope.var2);
};
}
I know you said you like jQuery - but to make best use of Angular you need to think in an Angular way - use bindings, don't manipulate the DOM directly etc.
For this example, it would be helpful to read up on the isolated scope bindings used - '#' and '=', see:
http://docs.angularjs.org/guide/directive