3

I'm a bit new to Angular, and I am trying to get a grip on how to utilize Angular in a "correct" way regarding directives.

My use-case is that I'm developing a 3D-project viewer with Angular & ThreeJS. A user can have different "projects" that is available for him to view.

The way we want to utilize the project identification is through url parameters, so that a person is able to link a specific project to other people to view.

The Viewer/Renderer is defined as a directive, so that we can define the viewer as following

...
    <viewer></viewer>
...

As I have understood it, there are some different ways to deliver the url parameters to the viewer-directive, and I'm trying to utilize $stateParams to access the parameter from the url. But as I continued working, there is no "clear" way to access the $stateParams, but you have to connect a controller to the directive, and then access it from there.

Is this the intended way to do this? Or should I define it as attributes to the viewer directive? If so, how do I access the url parameter in the html code? Or is there a third and better option?

As you probably understand I'm kinda new to angular, and I mainly want to get a grip of the intended usage of Angular, so that I don't screw up to much now at the start.

Best regards, David.

David Gustavsson
  • 597
  • 4
  • 25

2 Answers2

2

You can access your url parameters via scope, as you will be passing a string so @ makes more sense here : 

scope: {
    datasource: '@'
}

In your directive you can pass the value like this: 

<viewer datasource={{urlParamValue}}></viewer>

And in your controller, you can gather the url params like this: 

function Controller($scope, $location){
    var urlParamValue = $location.search().urlParamValue;    
}
Thalaivar
  • 23,282
  • 5
  • 60
  • 71
  • Your answer is good apart from the scope declaration. First, you do not need a name behind `@` unless you want to rename your field. `datasource: '@datasource'` is redundant and equivalent to `datasource: '@'`. Second, you need either a one-way `<` or two-way `=` binding or you need to wrap your `urlParamValue` in curly brackets in your template. Otherwise you'll end up with the string `urlParamValue` instead of the actual url param in your directive. – PerfectPixel Nov 01 '16 at 09:17
  • @PerfectPixel: Ah thanks.. changed... i don't think so we need a two way data binding here... as its url parameters value and its mostly going to be string... – Thalaivar Nov 01 '16 at 09:25
  • 1
    Thanks a lot. I managed to utilize what you mentioned here. While it probably is a good design behind it, when you have just learned that you can inject a lot of cool parameters to your services and controllers, you get a bit frustrated when the same thing does not apply to directives. – David Gustavsson Nov 01 '16 at 09:36
  • If you want to optimize, you may use a one-time binding `{{::urlParamValue}}` as the parameter should not change without the view changing. By the way you could inject `$location` into your directive, however, it is not necessarily good design. ;-) – PerfectPixel Nov 01 '16 at 13:52
1

you can use as below for 2-way binding.

scope: {
    datasource: '=datasource'
}
Nikhil Mohanan
  • 1,260
  • 1
  • 12
  • 23