ng-model outside controller

Question

ng-model outside controller

1k Views Asked by Webeith At 26 April 2025 at 00:55

I'm trying to edit view outside ng-controller element. I was able to solve it by using $rootScope and dom manipulations, but I want to know how it can be solved by native angularjs?

Html:

  <body>
    <div class="container">
      <div class="block" ng-controller="BlockController as block">
          <div><strong>Name:</strong> {{ block.name }}</div>
          <a href ng-click="block.edit()">Edit</a>
      </div>
    </div>
    
        
    <div class="container-editor">
      <div id="block-editor"></div>
    </div>
  </body>

Js:

  angular.module('app', [])

  .controller('BlockController', BlockController);

  function BlockController($compile, $scope)
  {
      this.name = 'default name';

      this.edit = function() {
          var $editor_html = ' <input type="text" ng-model="block.name" name="name" /> <a href ng-click="block.save()">Save</a>';

          $editor_html = $compile($editor_html)($scope);
          angular.element(document.querySelector("#block-editor")).html('').append($editor_html);
      };

      this.save = function() {
          // save block
          angular.element(document.querySelector("#block-editor")).html('');
      };

  }

plnkr

here is example

Original Q&A

There are 1 best solutions below

**Dawid Karabin** · Answer 1

More angular way? Just use directives. Basically, you can get a controller(s)* of a parent directive inside a child directive. Treat parent controller as an API for its child / children.

.directive('parent', function() {
  return {
    controller: function() {
      this.catchChild = function(child) {
          // code...
      };
    }
  };
})
.directive('child', function() {
  return {
    require: '^parent',
    link: function($scope, $element, $attrs, parentController) {
      $scope.jump = function() {
        // I'm jumping...
        parentController.catch($scope);
      };
    }
  };
})

I updated your plnkr for you: http://plnkr.co/edit/qRURHRMWt9K5acLWmCHv?p=preview

(*) You can pass multiple directives as an array

angular.module('app', [])
.directive('parent1', function() {
    return {
        controller: function() {
            this.fn1 = function(child) {
                // code...
            };
        }
    };
})
.directive('parent2', function() {
    return {
        controller: function() {
            this.fn2 = function(child) {
                // code...
            };
        }
    };
})
.directive('child', function() {
    return {
        require: ['^parent1', '^parent2'],
        link: function($scope, $element, $attrs, controllers) {
            var parent1Controller = controllers[0];
            var parent2Controller = controllers[1];
            parent1Controller.fn1();
            parent2Controller.fn2();
        }
    };
})

ng-model outside controller

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-MODEL

Trending Questions

Popular # Hahtags

Popular Questions