Can I watch for changing attibutes in directive?

Question

Can I watch for changing attributes in directive?

I have something like this:

<online-wathers></online-watchers>

It shows online connected users to the video broadcast and requires a broadcast-id. Obviously without this attribute it won't work. This video broadcast starts not on document ready, but when a publisher actually wants to start it. And when he starts - the backend gives me the broadcast id.

For now I just append it to the DOM with broadcast-id="xx" when api returns me broadcast-id.

$(".online-watchers-container")
      .html($("<online-watchers broadcast-id='"+broadcast.id+"' />"));
$(".chat-container")
      .html($("<chat broadcast-id='"+broadcast.id+"' />"));
$(".request-container")
      .html($("<live-requests broadcast-id='"+broadcast.id+"'></live-requests>"));

// compile directives
angular.bootstrap(angular.element("online-watchers, chat, live-requests"), ['MyApp']);

But is there any internal way to watch adding or changing an attributes? So on page load I will already have <online-watchers></online-watchers> in DOM and when I get response with broadcastId i just add attribute to element in DOM and directive reacts on it.

Please, if you treat it like shit-code, I'll much appreciate if you show some examples of better solution.

Thanks.

I suggest you to start by reading this. You are doing many many things wrong right now. http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background — Umur Kontacı, Mar 24 '13 at 19:50
For the core part of the question: http://docs.angularjs.org/guide/directive (Section: Attributes) — Umur Kontacı, Mar 24 '13 at 19:52
@fastreload, thanks, i read this before. it's like a needed solutoin and I don't see (for now) any other.. That's why I'm asking for a better solutions here. — Mak, Mar 24 '13 at 19:53
The Attributes part, the example starting with $observe is what you are looking for indeed — Umur Kontacı, Mar 24 '13 at 19:55
Thanks, can you throw some example of $observe in plunkr? I was doing it as well, but not worked for me.. ? — Mak, Mar 24 '13 at 19:57
Nope, you can $watch with the current scope in the directive. This would also help you: http://stackoverflow.com/questions/12371159/angularjs-how-to-get-evaluated-attributes-inside-a-custom-directive/12372494#12372494 — Umur Kontacı, Mar 24 '13 at 20:13
haha I'm just lookin your answer there :) Thanks! I'll try it — Mak, Mar 24 '13 at 20:15
@fastreload, will you please look at this? http://plnkr.co/edit/gOSlGVBTHa1os7sfDfv9 I've just really solved my question with your help. Want to post all your comments in Answer form? I'd approve it.. Thanks — Mak, Mar 24 '13 at 20:40

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Yes, you can

function MyDirective() {
    return {
        link: function (scope, iElement, iAttrs) {
            scope.$watch(iAttrs.scopeProp, function (val) {
                console.log("prop: " + val);
            });
            iAttrs.$observe("interpolated", function (val) {
                console.log("interpolate: " + val);
            });
        }
    }
 }

.

<my-directive scope-prop="someId" interpolated="{{someId + 1}}"

.

function MyCtrl($scope) {
    $scope.someId = 12;
}

For more examples, check out: How to get evaluated attributes inside a custom directive

edited May 23 '17 at 11:57

Community

1
1

answered Mar 24 '13 at 22:08

Umur Kontacı

35,403
8
73
96

2

I don't think you want to use $observe with `scope-prop`, since the value of that attribute is just a string (it is not interpolated), hence it will never change. The console log shows `prop: someId`. The $observe callback function for `scopeProp` will never be called again. – Mark Rajcok Mar 25 '13 at 23:52
Indeed I don't, I was not careful enough. Thanks for the heads up. – Umur Kontacı Mar 26 '13 at 00:03
Yea, finnaly i've choosed $observe, end set an attribute like and it works as well if I set broadcast-id="123". that's what i wanted. Thanks for your help :) – Mak Mar 26 '13 at 10:55

Can I watch for changing attibutes in directive?

1 Answers1