0

I have broken down my main html page to several sub pages and imported the child pages to main html file. Now, It seems each page refers to different '$scope' variables. I need to refer ng-modle="My-model" from one child page to another child page. Is that possble to do? My sample code as follows,

search-parent.html

<div class="widgets">
  <div class="row accordions-row">
    <div class="col-md-6" include-with-scope="serch.html"></div>
    <div class="col-md-6" include-with-scope="other-search.html"></div>
  </div>
</div>

search.html

<div class="col-sm-9">
    <input type="text" class="form-control" ng-model="mymodel">
</div>

other-search.html

<div class="col-sm-9">
    <input type="text" class="form-control" ng-model="mymodel">
</div>

Angular module configuration

(function () {
    'use strict';

    angular.module('my-module', [])
    .config(routeConfig);

    /** @ngInject */
    function routeConfig($stateProvider) {
        $stateProvider
        .state('state1', {
            url: '/search',
            controller: 'ctrl',
            templateUrl: 'search-parent.html',
        });
    }
})();

thank you!

Aravind Cheekkallur
  • 3,157
  • 6
  • 27
  • 41
Janitha Madushan
  • 1,453
  • 3
  • 28
  • 40

1 Answers1

1

You can use shared services or broadcasting events or $rootScope or you can maintain the same controller for all child templates. But using $rootScope is not good approach.

Share data between AngularJS controllers

Vijay Krishna
  • 112
  • 12
  • $broadcast and use listeners to gain control over requests. To me $rootscope feels very brute Force (but I too have used it in cases). – billy_comic Oct 24 '17 at 03:40