CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Krishna Deepak
Krishna Deepak

Reputation: 1765

how to communicate easily to parent scope

I am using angular directives to create a little complex form.

<div class="row">

     <div class="col-xs-4">
        <span></span>
     </div>

    <div class="col-xs-8" ng-controller="newOrdercontroller" >
        <form class="form-horizontal" ng-submit="checkvalues(order)">
            <div id="items-container">
                <new-generic-item item-type="ecommerce" deletable="false" item-id="1"></new-generic-item>
            </div>
            <button class="btn btn-primary" ng-click="addElement($event)">Add Item</button>
            <button class="btn" type="submit" ></button>
        </form>

    </div>
</div>

evidently, new-generic-item is the directive i'm using. This directive creates multiple form elements.

    .directive("newGenericItem", function() {
    return {
        restrict: 'E',
        templateUrl: 'static/js/directives/genericItem.html',
        controller: function($scope, $element, $attrs){
            var itemType = $attrs['itemType'];
            var itemId = $attrs['itemId'];
            var deletable = $attrs['deletabe'];

            $scope.items = $scope.itemTypes[itemType];

        },
        scope:true
    }
})

this produces the following form. enter image description here

so with Add Item button I managed to add the multiple directives.

enter image description here

this is the reason why i used scope:true in my directive factory.

The problem comes with this using of different scopes. I am having a hard time submitting the form. What would be the easiest way to access all the values of this form.

I have come simple solutions where in directive is used to create single simple form-element. (http://jsfiddle.net/revolunet/9e7Hy/)

My situation is different as it involves multiple form elements.

incase, having the controller code is useful

.controller('newOrdercontroller', function($scope, $compile,  itemTypes){
        $scope.itemTypes = itemTypes;
        $scope.addElement = function(event){
            var element = angular.element(document.querySelector("#items-container"));
            element.append($compile('<new-generic-item item-type="ecommerce"></new-generic-item>')($scope));
        }

        $scope.checkvalues = function(order){
            console.log($scope);

        }
    });

Upvotes: 0

Views: 75

Answers (2)

Petr Averyanov
Petr Averyanov

Reputation: 9476

  1. Do not manipulate DOM directly when u can avoid it.
  2. You have several properties, why not put them into object.
  3. If u use isolated scope - access variables correctly, not throw attributes (which do not give u binding by default). So in the end:
<new-generic-item ng-repeat="item in items" item="item"></new-generic-item>
<button ng-click="addNewItem()">Add</button>

in controller: $scope.items = [{type: ..., id: ...}]; $scope.addNewItem = function() { $scope.items.push({new object}); } In directive:

scope: { item : '='}

Add just use 'item' in template, like

<input ng-model="item.type">

Then in submit you have all your data in array and can easily do whatever you want.

Upvotes: 0

Laurent Lequenne
Laurent Lequenne

Reputation: 902

Using events :

Example... Child scope: 

$scope.$emit('runApplication', parameters);

On one of your ancestors scope (definitely sure that is not your parent ) Actually I don't know what's in par2, maybe the scope of the directive firing the event. It's still some test code :)

$scope.$on('runApplication', function(par2, parameters) {

});

Upvotes: 1

Related Questions