AngularJS Tutorial #18 - Custom Directives

[@BenMWard]

Your tutorials are *really* helpful and I'm baffled by the lack of views... this set of 25 tutorials was honestly the least intimidating and most logical flow for introducing angular that I've seen yet, and helped me tons. Thank you!!

[@NetNinja]

Ben Ward Many thanks, really glad you liked it 😀

[@АлексейПригарин-й3т]

Haven't understood about scope in directive, HELPPP PLS

[@selvoselvo1]

yap the part with '=' is new for me, don't quite understand how it goes.

[@АлексейПригарин-й3т]

Rasp Berry, i have understood, will explain later

[@_Squiggle_]

Yes!!

[@johnbuchmann4912]

This series IMO is the best non-intimidating series I've seen, and a great start before digging deeper. Wish I had seen this first before doing other harder-to-understand series.

[@somanylizards88]

I've been jumping from site to site to find what you simply laid out in like 8 minutes. Thank you, you are awesome!

[@NetNinja]

Great :) thanks for watching!

[@WiLL-by5sw]

one of the best instructor for sure! Thanks man!

[@zaheetbatada1973]

best tutorial man, even afer 4 years of making the video series on it, its still helpful ! thanks a lot

[@NadimMadani]

Hello. Instead of multiplying by 4 I tried to multiply Math.random() by the length of the ninjas array. I assumed this would work since $scope was passed into the function but I am noticing that $scope.ninjas is undefined? Why is that and what would be the best way to get the length of the array?

[@mratanusarkar]

did u get a solution?

[@BackwardsDaveTV]

​@@mratanusarkar Add this attribute and value in the directive: ng-if="ninjas". The problem is because the $http.get() runs asynchronously. When you try to access the $scope.ninjas it's not actually set at that point. By using the ng-if, you only create the random-ninja directive code once the ninjas variable has a value.

[@atamishali]

Probably the best one on directives. Good work.

[@nerdiloo9863]

Doooooooddd... your explanation is gold! Sadly in 2018 I have to build/maintain some code using AngularJS instead later versions which I prefer. Now I don't have to worry about gluing patches of hair on my head. THANK YOU.

[@ben.aka.bigben]

I watched few, your explanation was the cleanest and most direct. cheers!

[@chengjinfei8139]

Your tutorials are really helpful man .

[@ZeWitchKid]

i was stuck, i watched this,now im not stuck , so i subbed!

[@LovisaSandhu]

Love these tutorials, thanks Net Ninja! I was wondering if we have to set the random $scope each time we add/remove items in our data array or is there a way to adjust the Math.floor(Math.random() * 4) so it automatically updates to how many items there are?

[@VV-hk8ix]

So thanks of you, you explained in a very nice and fast paced way. Thank you so much once again

[@NetNinja]

You're very welcome! :)

[@AMITRIKKUINDIA]

Hi for me img is not showing in browser there are no errors logged in console but when I inspected through elements image tag was showing like there was no source inside?

[@vishekkumar8371]

how the ninjas[random] is accessible in random.html as we have defined random in app.js

[@salmahassan8689]

very helpful tutorial , thank you . but excuse me i have a 2 questions : 1) in the example which you did in the tutorial you made a random ninjas directive to get random ninjas , ok why didn't make it by make another html file with its controller , then inject it in the main html file by ng-include directive ? does directive way save time or easier ? or there are another reasons ? 2) i want to ask about file paths .. i know that if the file which i want to get in the same level , i will just write filename.extention ... and i it is in another folder and i am in another one ../foldername/filename.extention . but i found the paths in angular and node doesn't work in the same way for ex in angular app i have home.html and partialHome.html in the same folder "views" so i thought that i can write but it doesn't work .. but when i write it worked .. why ? is there another technique to get path in angular and node ? if so ,, how can i search about that ? and thank you very much .

[@linlinli2440]

hi, great tutorial but I got confused at 11:40 in this video. why ng-src = "{{}}" , why do you need {{}} to add parameters? why cannot you just use ng-src = " ninjas[0]xxx"? I am so confused with this parameter parse. thanks

[@linlinli2440]

oh I got confused with ng-include src.

[@prashantjoshi4691]

At 16:17 why are we not passing $scope to function like this, please explain myNinjaApp.directive('randomNinja',[$scope,function($scope) { return { restrict: 'E', scope: { ninjas: '=', title: '=' }, tempelateUrl: 'views/random.html', controller: function($scope) { $scope.random = Math.floor(Math.random() * 4); } }; }])

[@r-i-ch]

Do the scope:{} keys always have to be all lower-case? I was trying to call mine 'ninjasArr', but it wasn't working. Looked at the HTML and the tag was rendering as 'ninjasarr' but since HTML is technically not case-sensitive, I guess I understand why it could be rendered that way. Once I changed what was in the custom directive's scope to an all lower-case value 'ninjas', everything was aok.

[@user-zx1rl8wp8e]

great angular`s explanations. thanks for the best tutorial!

[@ameerfakhraldeen4397]

Hi Shaun! I have a question. In a previous video you had said that using an expression inside a src attribute wouldn't work and you need to use the ng-src attribute. However, it seems to be working fine here. Can you explain why it works here but previously didn't? Thanks!

[@krishnakrmahto97]

in the view, you won't find anything wrong. check the console (in the developer tools of the browser), there you'll be shown an error. Shaun has covered this in the video.

[@Yumako87]

Whenever i make a change in my code, i get a 404 error, and the page is stuck on /directory, if i go back to localhost:8000 which is my server it works

[@BennyPowers]

Why did you need to create the scope property and pass data through via html attributes? why not use the NinjaController scope?

[@ParlonspeuparlonsRust]

+Benny Powers This is the great thing about directives, you create a whole new scope and pass only the required data to it. There are many good reasons for it, two of them being data security (2 way data binding means more security requirements to avoid wrong manipulation of the data layer) and optimization (the directive only gets the data it needs, so angular doesn't have to "carry" the whole controller scope around :) and you can use the directive in other pages / other scopes with other arrays if you want

[@BennyPowers]

+Jérémy Lempereur cool, so is that why the best practise is moving to components and directives?

[@ParlonspeuparlonsRust]

Well I think of it as a brick or some kind of Lego cube, the more you separate contents and concerns, the more scalable and flexible your app will be... Here s a documentation about the solid principles, which are development and architecture principles I do really value : www.google.fr/url?q=www.codeproject.com/Articles/703634/SOLID-architecture-principles-using-simple-Csharp&sa=U&ved=0ahUKEwjmwZe16L7MAhWKzRoKHVX_CUIQFggeMAY&sig2=JvLrKBXbj7kXqhkogamGcg&usg=AFQjCNExxjWM8SJNh8-MM3ka06zf6tqF-g the examples are written in C# but the article is really good :)

[@cardenat]

Very good and useful tutorial, thanks a lot.

[@respotheme85]

Thanks for this awesome tutorial

[@neenaw]

Be sure to check your templateUrl

[@boitumelomabogwane9489]

the image wont display infact im using angular i.7.5 and my jsom data looks different from yours..i cant seem to be able to access this data even. {"data":[{"name":"Biggy","thumb":"content/img/2.jpg"},{"name":"Zakes","thumb":"content/img/3.jpg"}],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"data/mydata.json","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"OK","xhrStatus":"complete"} i tried data[random].thumb but its blank

[@anandsunku]

there is no source code in the github link, is that updated some where else? github.com/iamshaunjp/angular-js-playlist ?

[@АлексейПригарин-й3т]

Haven't understood about scope in directive, HELPPP PLS

[@jasperp4666]

If someone facing issue with http.get().success change it to http.get().then

[@jamestacular]

I don't understand how "randomNinja" and "random-ninja" are magically paired to each other

[@37DMK]

It's angular. Try to picture a pre Web 2.0 Internet Explorer putting functionality out into the web with no controls or community to stop it from doing so. The consequence were the browser wars. You my friend are about to witness the framework wars.

[@longlongvs2012]

hi teacher how to create directive like this Help me xd

[@parthi5239]

hi all , those who are all want to display random image by adding length property with json file, the code is below firstModule.directive('randomData', [ '$http', function($http) { return { restrict: 'E', scope: { photo: '=', title: '=' }, templateUrl: 'views/random.html', controller: function ($scope) { $http.get('data/info.json').then(function(response){ var size = response.data.length; $scope.random = Math.floor(Math.random() * size); console.log("the random number is " + $scope.random); }) } } }]); thanks and let me know whether it works or not. bonne chance

[@matiusmizian8167]

My part stuck at this tutorial (custom directive display nothing), how i fix by replace custom directive code in app.js to this code: myNinjaApp.directive('randomNinja', [function(){ return { restrict: 'E', scope: { ninjas: '=ninjas', title: '@' }, templateUrl: 'views/random.html', controller: function($scope){ $scope.random = Math.floor(Math.random() * 4); } }; }]);