CODEWITHSUNDEEP
angularjsangularjs-directivescope
Jared Clemence
Jared Clemence

Reputation: 1065

What is wrong with my directive scope definitions?

I have several <select> fields in my form. I want to load the options dynamically, so I use ng-repeat to iterate through a list of options that can travel with the data object.

To make this feature more reusable, I break off this segment of code and create a directive:

javascript:

angular.module( "ngFamilyTree" )
    .directive( "selectInput", function(){
        return {
            restrict: "E",
            templateUrl: "templates/directives/selectInput.html",
            scope: {
                element: "=",
                options: "=",
                change: "="
            }
        };
    } );

templates/directives/selectInput.html:

<select ng-model="element" class="form-control">
    <option ng-repeat="(text, value) in options" value="{{value}}">{{text}}</option>
</select>

In the primary form, I then use the following directive elements at various places:

<select-input element="docCntl.document.type" options="docCntl.document.typeOptions"></select-input>

<select-input element="docCntl.document.category" options="docCntl.categoryOptions" change="docCntl.document.updateSubCategoryOptions()"></select-input>

<select-input element="docCntl.document.subcategory" options="docCntl.subCategoryOptions"></select-input>

What I find peculiar is that the first instance, where I set the element to "docCntl.document.type" works perfectly. Every time I change the value of the select, the value of the corresponding element changes in the model object. However, the second and third items do not change the model value.

Also, I have tried this with and without the "change" attribute. The goal with this is to be able to set an update function that changes the available options for the subcategory as the category changes.

Note: I intentionally have stored the category options and sub-category options in docCntl and not in docCntl.document; this is why they look different from the options that are available for the type selector.

Note 2: The Category and Sub Category are properly loaded with the correct options on the initial page load.

Upvotes: 0

Views: 93

Answers (2)

Code Warrior
Code Warrior

Reputation: 34

Try this solution http://plnkr.co/edit/wdKObUItDMqLyVx1gObS?p=preview

  1. Add parent scope object the directive. You can use root scope but that is not a good practice. Note the addition of parentScope, link and cascade.

ngFamilyTree.directive("selectInput", function() {
 return {
    restrict: "E",
    templateUrl: "templates/directives/selectInput.html",
    scope: {
      element: "=",
      options: "=",
      change: "=",
      parentScope: "="
    },
    link: function(scope) {
      scope.cascade = function(val) {
        if (typeof scope.change === 'function') {
          scope.change(scope.parentScope, scope.element);
        }
      };
    }
 };
});

2.Change the directive template to call cascade function

    <select ng-model="element" class="form-control" ng-change="cascade()">
        <option ng-repeat="(text, value) in options" value="{{value}}">{{text}}</option>
    </select>

  1. In the controller, make updateSubCategoryOptions function stateless and pass a way to access the master sub-category list and the currently selected category $scope.docCntl.document.updateSubCategoryOptions = function(docCntlIn, category){docCntlIn.subCategoryOptions=docCntlIn.categorySubCategories[category];}

Upvotes: 1

atefth
atefth

Reputation: 1623

Have you read this? You can use the ng-options directive to achieve the same result.

You can use something like this in your markup -

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

The corresponding script in your controller should be something like this -

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

Hope this helps :)

Upvotes: 2

Related Questions