2

I am building a demo weather app, by using controller/provider & 2 directives,( with isolated scope, one directive for rendering week worth forecast & another directive to display clicked weekday forecast on top of the page).

On click on one of the week days I am trying to show clicked weekday on top of the screen. This works fine if I remove Isolated scope in directives however it does not work with isolated scope in place.

Can anyone please suggest what I am missing here?

Link: A directive with Isolated Scope: http://plnkr.co/edit/L9AcMv?p=preview ( this does not work? What Am I missing here?)

Code for your reference:

    app.directive('myWeather', function() {
      return {
        restrict: 'EA',
        transclude: 'true',
//If I comment below scope then it works fine though it does not if I am using isolated scope
        scope: {
          place: '=' //Two-way data binding
        },
        templateUrl: 'my-weather.html'
      };
    });

    app.directive('selectedWeather', function() {
      return {
        restrict: 'EA',
        transclude: 'true',
//If I comment below scope then it works fine though it does not if I am using isolated scope
        scope: {
          place: '=' //Two-way data binding
        },
        templateUrl: 'selected-weather.html'
      };
    });

Many Thanks,

Maverick09
  • 1,067
  • 1
  • 11
  • 21
  • You might wan't to look at this problem and answer that is very similar to what you have and which essentially is caused by the way prototypes work in js and how they are used in angularjs: http://stackoverflow.com/questions/23686831/why-form-undefined-inside-ng-include-when-checking-pristine-or-setdirty/23687917 – miensol Aug 14 '14 at 05:12

1 Answers1

5

When you use isolated scope, the setSelectedItem method of controller scope are invisible.

Solution:

Add a setSelectedItem to the directive isoalted scope. + Add a two way data binding to forecast too.

Working at: http://plnkr.co/edit/e5ApIg?p=preview

The changes made are:

app.directive('myWeather', function() {
  return {
    restrict: 'EA',
    transclude: 'true',
    //If I comment below scope then it works fine though it does not if I am using isolated scope
    scope: {
      place: '=', //Two-way data binding
      /// here added a two way data binding to forecast too
      forecast: '='
    },
    templateUrl: 'my-weather.html',
    /// here added setSelectedItem to isolated scope.
    link: function (scope,e,a) {
      scope.setSelectedItem = function(forecast) {
          scope.forecast = forecast;
      }
    }
  };
});

And on index.html

<div my-weather place="place" forecast="forecast"></div>
rnrneverdies
  • 15,243
  • 9
  • 65
  • 95
  • Please explain why the authors solution didn't work, providing a solution is good but won't help him if he gets in trouble again for the same reason... – miensol Aug 14 '14 at 05:08
  • How can I achieve same results using "&" instead of using "=" For example : scope: { place: '=', forecast: '&' }, – Maverick09 Aug 14 '14 at 19:03
  • "&" mean expression. Read this http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ – rnrneverdies Aug 15 '14 at 03:39