AngularJS - Isolate scope binding to parent scope

Question

If I have an html element in my "parent" page like so:

   <div ng-include"'Go-To-Child-Page.html'" />

Any my child/include page is like so:

   <some-directive two-way-binding="$parent.SomeParentScope"></some-directive>

Why is this not working for my directive? Or better yet, how do I make it work?

 app.directive ('someDirective', function(){
    return {
        retrict: 'E',
        replace: true,
        scope: {
            myBinding : "=twoWayBinding",  <- this is what is not working
        },
        template: '<select ng-model="myBinding" ng-options="myType.Description for myType in myTypes"></select>'
    };
}

Edit Update:

Why did I post this question?

After completing a very lengthy form, I immediately noticed how I had quite a number of similar controls that the coder in me said I should abstract out. One of those was the select control. Two scenarios were involved with this control:

(1) Where the user had to choose a filter before the select control was populated; and

(2) Where the code pre-defined the filter for the select control.

The solutions for both those scenarios are shown below. I hope this helps everyone because I truly enjoy using Angular and the directive functionality it provides to create "Html-magic" is amazing.

Take out the ng-model from the div ( unless you have content-editable on it ).. Your twowayBinding in html should be twoway-binding.. Try these changes and see if it still doesnt work. — Ganaraj
– Ganaraj, Commented Apr 24, 2013 at 14:24
@ganaraj - Which div? The child or directive. I posted a plunker since your comment — Bye
– Bye, Commented Apr 24, 2013 at 14:42

Langdon · Accepted Answer · 2013-04-24 17:49:18Z

You seem to be doing a lot of things unnecessarily, but that might be because I'm misunderstanding your goal.

I've fixed your plnkr here: http://plnkr.co/edit/FqpzC5p1Ogm4attYiArV?p=preview

The basic changes that were necessary seem to be:

Pass the selected filter (Rear/Front) into your directive
Replace ngOptions with ngRepeat and a filter

There's really no need for your directive to have a controller (and generally most directive's should use a linker function). I stripped out some bits to make it simpler, but you can still wire up $scope.filterTypes as you were (pulling available Types from $scope.myTypes) and it'll still work the same.

Update

Since you didn't spell out all of your requirements, I may be missing some, but this implementation is what I gathered you are looking for:

http://plnkr.co/edit/pHgJ84Z35q5jxCpq3FHC?p=preview

It's got dynamic filtering, it's not unnecessarily using a controller, it's got two-way binding. The only problem is that it's referencing the "Description" field (as your original was). You can work that in to be configurable in HTML if you like.

Yes I need 'filterTypes' as there is more than one filter, ie type & then alpha
Is $scope.myTypes going to change dynamically or be loaded once? If dynamically, then you'll need to add that $watch statement back (except watch myTypes instead). And if loaded once, then in the callback after you load it, you'll need to set $scope.filterTypes dynamically (as you were doing in your old watch on Type).

Bye · Accepted Answer · 2013-04-26 14:32:18Z

Scenario 1 : Let the user filter:

Filter: 
<input type="radio" ng-model="choice.type" value="Rear"> Rear
<input type="radio" ng-model="choice.type" value="Front"> Front
<br>
Select:
<name-value-select selected-item="selected.item" choice="choice.type" options="axleTypes"></name-value-select>

Scenario 2 : pre-filter in code:

<name-value-select preselected-filter="Front" selected-item="selected.item" options="axleTypes"></name-value-select>

The directive for both scenarios:

.directive('nameValueSelect', function () {
  return {
    replace: true,
    restrict: "E",
    scope: {
        selectedItem: "=",
        choice: "=",
        options: "=",
        preselectedFilter: "@"
    },
    controller: function ($scope) {
        $scope.$watch('choice', function (selectedType) {
            $scope.selectedItem = '';  // clear selection
            $scope.filterTypes = [];
            angular.forEach($scope.options, function (type) {
                if ($scope.preselectedFilter !== undefined) {
                    selectedType = $scope.preselectedFilter;
                }
                if (type.Type === selectedType) {
                    this.push(type);
                }
            }, $scope.filterTypes);
            $scope.filterTypes.sort(function (a, b) {
                return a.Description.localeCompare(b.Description);
            });
        });
    },
    template: '<select  ng-model="selectedItem"  ng-options="o.Description for o in filterTypes"><option value="" selected="selected">Please Select </option></select>'
}; 
 });

And the proverbial obligatory plunker:

http://plnkr.co/edit/tnXgPKADfr5Okvj8oV2S

Collectives™ on Stack Overflow

AngularJS - Isolate scope binding to parent scope

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related