Rectangle 27 32

With Angular 1.2, you need to inject $sce service and trustAsResourceURL the src of an iframe.

.directive('youtube', function($sce) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('code', function (newVal) {
           if (newVal) {
               scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
           }
        });
    }
  };
});

I tried the above and I added the missing comma for the end of the template: line, Now it's not giving any error, but it doesn't show the video embedded, inspecting the element I see the src attr empty.

@JonathanHindi It works here: plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview with Angular 1.2 How are you using the directive in the template?

Thanks now it works, I was using the <youtube code="{{code}}"></youtube> I thought I need to pass it with the currently brackets to be evaluated first then pass the actual value to the directive. but it seems that I was wrong.

You saved me lots of try and error. Thanks @musically_ut

javascript - Create a YouTube AngularJS Directive - Stack Overflow

javascript angularjs youtube angularjs-directive
Rectangle 27 32

With Angular 1.2, you need to inject $sce service and trustAsResourceURL the src of an iframe.

.directive('youtube', function($sce) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('code', function (newVal) {
           if (newVal) {
               scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
           }
        });
    }
  };
});

I tried the above and I added the missing comma for the end of the template: line, Now it's not giving any error, but it doesn't show the video embedded, inspecting the element I see the src attr empty.

@JonathanHindi It works here: plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview with Angular 1.2 How are you using the directive in the template?

Thanks now it works, I was using the <youtube code="{{code}}"></youtube> I thought I need to pass it with the currently brackets to be evaluated first then pass the actual value to the directive. but it seems that I was wrong.

You saved me lots of try and error. Thanks @musically_ut

javascript - Create a YouTube AngularJS Directive - Stack Overflow

javascript angularjs youtube angularjs-directive
Rectangle 27 13

ngFocus is not available on Angular 1.0.7. It's available on Angular 1.2.

You can create your own ngFocus directive, it's quite simple, have a look here:

the website is still giving out 1.0.7. Is 1.2 available? is it stable?

It's not stable yet, they released an rc1 version: blog.angularjs.org/2013/08/

javascript - ng-focus and ng-blur events not triggering in Angularjs -...

javascript jquery angularjs
Rectangle 27 61

Whitelist the resource with $sceDelegateProvider

This is caused by a new security policy put in place in Angular 1.2. It makes XSS harder by preventing a hacker from dialling out (i.e. making a request to a foreign URL, potentially containing a payload).

To get around it properly you need to whitelist the domains you want to allow, like this:

angular.module('myApp',['ngSanitize']).config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from our assets domain.  Notice the difference between * and **.
    'http://srv*.assets.example.com/**'
  ]);

  // The blacklist overrides the whitelist so the open redirect here is blocked.
  $sceDelegateProvider.resourceUrlBlacklist([
    'http://myapp.example.com/clickThru**'
  ]);
});

This example is lifted from the documentation which you can read here:

If you want to turn off this useful feature, and you're sure your data is secure, you can simply allow **, like so:

angular.module('app').config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist(['**']);
});

Note: if resourceUrlWhitelist somehow doesn't work for you, check if you don't have double slash after domain name (easy for this to happen when concatenating stuff from variables and they both have slashes)

This is a cleaner, global and secure way to go around this issue.

"Dialing out" is not a great term to use for someone trying to understand the issue.

Thanks @Ringo - I have added a comment to clarify.

javascript - External resource not being loaded by AngularJs - Stack O...

javascript angularjs cordova
Rectangle 27 11

It is the $sce service that blocks Urls with external domains, it is a service that provides Strict Contextual Escaping services to AngularJS, to prevent security vulnerabilities such as XSS, clickjacking, etc. it's enabled by default in Angular 1.2.

you can disable it completely, but it's not recommended

angular.module('myAppWithSceDisabledmyApp', [])
.config(function($sceProvider) {
    $sceProvider.enabled(false);
 });

javascript - How to set an iframe src attribute from a variable in Ang...

javascript html angularjs iframe angularjs-directive
Rectangle 27 11

It is the $sce service that blocks Urls with external domains, it is a service that provides Strict Contextual Escaping services to AngularJS, to prevent security vulnerabilities such as XSS, clickjacking, etc. it's enabled by default in Angular 1.2.

you can disable it completely, but it's not recommended

angular.module('myAppWithSceDisabledmyApp', [])
.config(function($sceProvider) {
    $sceProvider.enabled(false);
 });

javascript - How to set an iframe src attribute from a variable in Ang...

javascript html angularjs iframe angularjs-directive
Rectangle 27 552

<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>
orderBy:['-group','sub']
group

Does the group field have priority for being first in the orderBy List?

@luchosrock, yes it does, as expected. Playing with the provided jsfiddle easily confirms sort priority is from left to right for the provided sort fields.

Do you know if it's possible to give priority to one of the fields? For example in this jsFiddle I would like the items with a value for 'sub' to appear at the top of the list, then the rest of the values can be arranged by group.

We simulated priority in our shop by giving the array items a boolean property, then using that as the first option. Example: orderBy: ['-featured', 'title'], which caused the featured true items to be at the top (alphabetically), then the rest of the items listed alphabetically.

javascript - orderBy multiple fields in Angular - Stack Overflow

javascript angularjs sorting angularjs-ng-repeat angularjs-orderby
Rectangle 27 1

ng-bind-html-unsafe has been removed in angular 1.2. What you've done with ng-bind-html should work, you have to make sure you add ngSanitize as a dependency in your app. For example...

angular.module('myApp', ['ngSanitize']);

Thanks for the comment! As long as I load it from the full URL, no problem. If i try and load locally, it doesn't show.

Just noticed that the img tag was using ng-src. Make sure that's src.

javascript - src stripped from json html data when using angular.js an...

javascript html json angularjs
Rectangle 27 191

In Angular 2 you can subscribe (Rx event) to a Router instance. So you can do things like

class MyClass {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
        // see also 
        console.log(val instanceof NavigationEnd) 
    });
  }
}

Regarding the deprecated version: For some reason this would not detect the first route change i'm making on initial load. I had to wrap this in a timeout of 400ms in the constructor, or 300ms in ngAfterViewInit, and then it works every time. ...even still, val is empty when using the browser back and forward buttons :(

Does anyone has a plunker example for this? I am having dependency injection error by only injecting Router.

event._root.children[0].value._routeConfig.data

@Akshay have you seen this article by Todd Motto: [Dynamic page titles in Angular 2 with router events] (toddmotto.com/dynamic-page-titles-angular-2-router-events)

javascript - How to detect a route change in Angular 2? - Stack Overfl...

javascript angular
Rectangle 27 723

Solution #1 - appearance: none - with ie10-11 workaround (Demo)

To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image

select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url(...);   /* add custom arrow */
}

appearance: none has very good browser support (caniuse) - except for ie11- and firefox 34-

We can improve this technique and add support for ie10 and ie11 by adding

select::-ms-expand { 
    display: none; /* hide the default arrow in ie10 and ie11 */
}

If ie9 is a concern - we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky ie9 selector to at least undo our custom arrow - leaving the default select arrow intact.

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    } 
}
select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}


/* CAUTION: IE hackery ahead */


select::-ms-expand { 
    display: none; /* remove default arrow in IE 10 and 11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    }
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

This solution is easy and has good browser support - it should generally suffice.

If browser support for ie9- and firefox 34- is necessary then keep reading...

overflow:hidden
select

The result is that the default drop-down arrow of the select element will be hidden (due to the overflow:hidden on the container), and you can place any background image you want on the right-hand-side of the div.

The advantage of this approach is that it is cross-browser (InternetExplorer8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select element).

[It should be noted, however, that if the custom select element is necessary only for MOBILE devices - then the above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this may be the best solution.]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}
<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

If the custom arrow is necessary on Firefox - prior to Version 35 - but you don't need to support old versions of IE - then keep reading...

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: Works well in WebKit and Gecko. It looks good too (no jutting out option elements)

Disadvantage: InternetExplorer (IE10 and down) doesn't support pointer-events, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make InternetExplorer revert to the standard built in arrow.

NB: Being that InternetExplorer 10 doesn't support conditional comments anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from InternetExplorer 10 with a CSS hack described here.

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646e;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
  background: #fff;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}
<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

It depends on the design requirements. If you're ok with the drop-down jutting out - then that's the best because it's cross browser (IMO allbrowsers + IE8+ could be considered cross-browser) but I think to many - this won't do. So actually in my statement above I meant that aprroach #2 was the best.

Also, the fiddle which I posted uses approach #2 with conditional statements to allow IE to use its default arrow.

@AlexisLeclerc Fixing the div and select to the same width only works in -webkit browsers like Chrome. (because I included the the rule -webkit-appearance: none; ) However this doesn't work in other browsers like firefox

If I may propose an improvement for Approach #1, I personally find the lack of border or lack of selection halo to the right side very annoying. I updated your fiddle with something I used in my current project : jsfiddle.net/YvCHW/1745 . Tell me what you think!

html - How to style a

Rectangle 27 163

import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';

constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

You can also filter by the given event:

import 'rxjs/add/operator/filter';

constructor(router:Router) {
  router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      // You only receive NavigationStart events
    });
}
pairwise
import 'rxjs/add/operator/pairwise';
import { Router } from '@angular/router;

export class AppComponent {
    constructor(private router: Router) {
        this.router.events.pairwise().subscribe((event) => {
            console.log(event);
        });
    };
}

@GunterZochbauer instead of 'is' I would use 'instanceof'. And 'event: Event' should be in parentheses. Thanks for this, pretty powerful new feature! I like it

Argument of type '(event: Event) => void' is not assignable to parameter of type

@RudiStrydom & Gnter Zchbauer - the Argument of type '(event: Event) => void' is not assignable to parameter of type error is because in your filter snippet you are subscribing to an object of type Event instead of NavigationEvent.

Second sample should be NavigationEvent instead of Event. Also dont forget to import "Event as NavigationEvent" from @angular/router

The hint about the import was for anyone looking to solve this error :)

javascript - How to detect a route change in Angular 2? - Stack Overfl...

javascript angular
Rectangle 27 710

Solution #1 - appearance: none - with ie10-11 workaround (Demo)

To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image

select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url(...);   /* add custom arrow */
}

appearance: none has very good browser support (caniuse) - except for ie11- and firefox 34-

We can improve this technique and add support for ie10 and ie11 by adding

select::-ms-expand { 
    display: none; /* hide the default arrow in ie10 and ie11 */
}

If ie9 is a concern - we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky ie9 selector to at least undo our custom arrow - leaving the default select arrow intact.

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    } 
}
select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}


/* CAUTION: IE hackery ahead */


select::-ms-expand { 
    display: none; /* remove default arrow in IE 10 and 11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    }
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

This solution is easy and has good browser support - it should generally suffice.

If browser support for ie9- and firefox 34- is necessary then keep reading...

overflow:hidden
select

The result is that the default drop-down arrow of the select element will be hidden (due to the overflow:hidden on the container), and you can place any background image you want on the right-hand-side of the div.

The advantage of this approach is that it is cross-browser (InternetExplorer8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select element).

[It should be noted, however, that if the custom select element is necessary only for MOBILE devices - then the above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this may be the best solution.]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}
<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

If the custom arrow is necessary on Firefox - prior to Version 35 - but you don't need to support old versions of IE - then keep reading...

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: Works well in WebKit and Gecko. It looks good too (no jutting out option elements)

Disadvantage: InternetExplorer (IE10 and down) doesn't support pointer-events, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make InternetExplorer revert to the standard built in arrow.

NB: Being that InternetExplorer 10 doesn't support conditional comments anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from InternetExplorer 10 with a CSS hack described here.

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646e;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
  background: #fff;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}
<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

It depends on the design requirements. If you're ok with the drop-down jutting out - then that's the best because it's cross browser (IMO allbrowsers + IE8+ could be considered cross-browser) but I think to many - this won't do. So actually in my statement above I meant that aprroach #2 was the best.

Also, the fiddle which I posted uses approach #2 with conditional statements to allow IE to use its default arrow.

@AlexisLeclerc Fixing the div and select to the same width only works in -webkit browsers like Chrome. (because I included the the rule -webkit-appearance: none; ) However this doesn't work in other browsers like firefox

If I may propose an improvement for Approach #1, I personally find the lack of border or lack of selection halo to the right side very annoying. I updated your fiddle with something I used in my current project : jsfiddle.net/YvCHW/1745 . Tell me what you think!

html - How to style a