1

the controller of my module has a property as a string in which I assemble HTML.

Within a directive I try to assign the HTML-string to an attribute of tooltip, that is "tooltip-html-unsafe".

I am able to assign the whole element to this tooltip-attribute. How can I acess the property of the parent scope?

Please see my plunkr for the code given: http://plnkr.co/edit/rTq8zrKdc3qABrc9Tde6?p=catalogue

Pille
  • 1,123
  • 4
  • 16
  • 38
  • What are you trying to access specifically? – ForgetfulFellow Feb 26 '14 at 08:36
  • I am trying to access the parents scope property named contentHTML within the controller as it is assembled there. From within the link-function (see plunkr) it makes no difference if I use element.html(scope[attrs.value])); or element.html(); as the whole bunch of tags are returned and set as attribute. – Pille Feb 26 '14 at 08:44
  • Are you planning to put your directive inside your controller in index.html? – ForgetfulFellow Feb 26 '14 at 08:54
  • The directive and controller are part of the same module (please see my code in plunkr) – Pille Feb 26 '14 at 09:03

2 Answers2

1

Two things:

  1. You need to update the value of $scope.contentHTML (just setting the var value isn't updating the $scope value). If you want to just read that value from your directive, you can access it in your linking function with scope.contentHTML.

  2. If you want to be able to set the parent scope's contentHTML property from your directive, you can use the scope property in your directive and set the value to "=". Then you can access it from scope in your linking function. For example: 

    app.directive("tooltipView", function($compile) {   
    return {
        restrict: "AE", 
        scope: {
            tooltipView: "="
        },
        link: function(scope, element, attrs) {
             console.log(scope.tooltipView);
        }
    };
});

If you plan to use the "=" sign value for scope in your directive (Number 2 above), you also need to tell your directive which scope value to map to in your HTML. So: <p tooltip-view="contentHTML">Hello {{name}}!</p> would map scope.tooltipView in your linking function to $scope.contentHTML in your controller.

See the plunkr based off yours: http://plnkr.co/edit/HskBFNRW8mC8QmVWr3hP

Stephen Kaiser
  • 1,545
  • 14
  • 10
  • How and where should I update the value of $scope.contentHTML? Is that because the link-function won´t recognize it? – Pille Feb 26 '14 at 09:32
  • I want to set the scope.contentHTML as an attribute. Using scope.contentHTML at any place within the link function gets me a stackoverflow. – Pille Feb 26 '14 at 09:43
  • If you use what is described in Number 2 above, you can update the value of $scope.contentHTML from your directive by using scope.tooltipView = ''. – Stephen Kaiser Feb 26 '14 at 09:44
  • Won´t I overwrite the old value from the parents scope/controller? – Pille Feb 26 '14 at 09:49
  • Yes, doing what's in Number 2 will overwrite the parent value. If you just want to read, use Number 1. If I understand what you are trying to do, it seems to be working in my plunkr version now (http://plnkr.co/edit/HskBFNRW8mC8QmVWr3hP?p=preview). If you right-click the element in the preview panel, it has the "tooltip-html-unsafe" attribute. – Stephen Kaiser Feb 26 '14 at 09:52
  • Thank you! As I would like to assign the contentHTML to an attribute I have to call $compile(element[0])(scope) afterwards that gets me a stackoverflow: element.attr("tooltip-html-unsafe", scope.tooltipContent); $compile(element[0])(scope); – Pille Feb 26 '14 at 10:01
  • I got it! Thank you very much. My fault was not to assign the scope to a variable like so: var tooltipContent = scope.contentHTML; within the link function. It is not allowed to use scope.contentHTML as the scope would have be called initiating the whole process. Again, thank you very much, Stephen! – Pille Feb 26 '14 at 10:07
  • Do you mean that you want to assign the value of contentHTML to an attribute or that you would like to be able to access it from the directive's "attrs" collection, like this: attrs.tooltipHtmlUnsafe? If you only want to assign and read it, you don't need $compile. – Stephen Kaiser Feb 26 '14 at 10:13
  • How can I mark this question as answered? I will make the changes within my plunkr for anyone who will need this or wants to see it. :-) – Pille Feb 26 '14 at 10:16
  • 1
    As the author, you should see a checkmark under the up/down arrows to the left of the question. Check that, and that should do it. :) – Stephen Kaiser Feb 26 '14 at 17:26
0

To access parent scope from current one you can do:

scope.$parent.someValue
Stepan Suvorov
  • 25,118
  • 26
  • 108
  • 176
  • So I could store the old value and then set a new one within the directive? Then I should have an own scope within the directive I guess? – Pille Feb 26 '14 at 09:50