Geek Answers Handbook

AngularJS: How to update the controller scope associated with the scope object when it changes?

Here is an explanation:

I have a current controller that creates an array of $ scope.plan.steps, which will be used to store each step:

.controller('PlanCtrl', function ($scope, $http) {
    $scope.plan = {
        steps: [{}]
    };

    $scope.addStep = function () {
        $scope.tutorial.steps.push({});
    }
}

Then I have the following directive, which has an isolated scope and which is associated with the index of the $ scope.plan.steps array:

.directive('planStep', function () {
    return {
        template: '<input type="text" ng-model="step.name" />{{step}}',
        restrict: 'E',
        scope: {
            index: '=index'
        },
        transclude: true,
        controller: function($scope, $element, $transclude) {

            $scope.removeStep = function() {
                $scope.$emit('removeStep', $scope.index);
                $element.remove();
                $scope.$destroy();
            }

        }
    };
});

These two link, create and delete objects inside the controller scope, however, how can I allow the directive to update the array of the controller scope in real time?

I tried doing $ watch in a directive with isolated area changes, $ emitting changes in the controller and specifying the index $ ... But no luck.

I created a plunker to reproduce what I have:

Link

, $.

, , , .

+4
2

, step? , , ng-repeat, , , .

<plan-step ng-repeat="step in plan.steps" index="$index" step="step"></plan-step>

:

scope: {
    index: '=index',
    step:'='
 },

$index remove() ( angular ):

 return {
  template: '<button  ng-click="removeStep()">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
  restrict: 'E',
  scope: {
    step:'='
  },
  transclude: true,
  controller: function($scope, $element, $transclude) {
    $scope.removeStep = function() {
      $scope.$emit('removeStep', $scope.step);
    }
  }

:

 $scope.$on('removeStep', function(event, data) {
  var steps = $scope.plan.steps;
  steps.splice(steps.indexOf(data), 1);
});

$emit, api (&).

return {
  template: '<button  ng-click="onDelete({step:step})">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
  restrict: 'E',
  scope: {
    step:'=',
    onDelete:'&' //Set up function binding
  },
  transclude: true
};

:

<plan-step ng-repeat="step in plan.steps"  step="step" on-delete="removeStep(step)"></plan-step>

+1

ng-repeat, , ng-repeat .

- angular

.directive('planStep', function() {
    return {
      template: '<button  ng-click="removeStep(step)">Delete step</button><br><input type="text" ng-model="step.name" />{{step}}<br><br>',
      restrict: 'E',          
      transclude: true,
      controller: function($scope, $element, $transclude) {
       var steps =  $scope.plan.steps// in scope from main controller
        /* can do the splicing here if we want*/
        $scope.removeStep = function(step) {
          var idx =steps.indexOf(step) 
           steps.splice(idx, 1);
        }
      }
    };
  });

, element.remove() , angular,

,

DEMO

+3

More articles:


All Articles