0

FYI-We are using Angular for it's data binding ability. We are not trying to develop our application as a SPA so I do not think that the $routeprovider is an option (if I am wrong let me know). So, here is the problem. When I use ng-include to load a left navigation as a partial, the section loads fine but the dropdown does not work because the scope's data in the parent scope is not available to the partial page because ng-include creates a child scope. So, my array, which has the url id I need to pass as a url parameter is 'undefined' when trying to access it from the partial using ng-include. What is the best way to get this to work?

Here is the drop down that is part of the navigation.

<select class="form-control-menu input-xs" ng-model="selectprogram" ng-change="onChange()" ng-disabled="isLoading"
ng-options="obj.name for obj in programList">
<option value="">PROGRAMS</option>
</select>

Here is the onchange event that is called.

$scope.onChange = function () {

        window.location.href = '../View/programs.html?reportid=' + $scope.reportID + '&programid=' + $scope.selectprogram.id;

    }

What is the best way to resolve this?

Nate
  • 2,044
  • 4
  • 23
  • 47
  • 1
    Using Angular just for its data binding ability is similar to using a car just to play an MP3. – Shomz Sep 23 '14 at 20:27
  • You do what your boss wants. right? But how about some constructive input Shomz. Thanks – Nate Sep 23 '14 at 20:38

1 Answers1

0

You have a couple of options:

  • Use an object in the parent scope for shared properties. Since scope is prototypically inherited updates will be persisted. This is not true for primitive types.

  • Define the onChange function on the parent scope (will persist due to prototypical inheritance as well).

  • Use $scope.$parent from the child scope. Not Recommended / Bad Practice.

A more in-depth discussion that is related:

AngularJS - losing scope when using ng-include

Community
  • 1
  • 1
Daniel
  • 423
  • 5
  • 11
  • The onchange does occur on the parent. when I inject my partial using ng-include, then that forces the creation of a child scope that I do not have access to. The child scope belongs to the ng-include directive. correct? I do not have a custom directive that could reference the parent. – Nate Sep 23 '14 at 20:49
  • Can you post a fiddle? Happy to help, but I'm not clear on how your scope is being shared. You can't access the child scope from the parent scope, so that's out. So you either share an object via prototypical inheritance or you can use $scope.$broadcast to fire off an event to share the data. – Daniel Sep 23 '14 at 20:58