Dynamically create view model for similar angular objects

Question

I am in a strange situation in which I need to create an on the fly view model for selected angular element.

Consider I have three different directives in my html view called <paragragh> and they all are connected to a single controller, ParagraphController. Since I need to share a setting between them, I've defined a service to hold my shared variables named ParagraphConfig which is connected to a controller called ParagraphConfigConroller.

paragraph.config.js

(function() {

  'use strict'

  angular
    .module('Application')
    .directive('ParagraphConfig', ParagraphConfigService);

  function ParagraphConfigService() {
    var paragraph = {
      text: 'blah blah',
      style: {
        fontWeight: 'normal',
        border: 0
      }
    }

    return {
      get: get
    }

    function get() {
      return paragraph;
    }
  }

})();

config.controller.js -> controllerAs: ParagraphConfigViewModel

(function() {

  'use strict'

  angular
    .module('Application')
    .directive('ParagraphConfigController', ParagraphConfigController);

  function ParagraphConfigController( ParagraphConfig.get ) {
    var self = this;
    self.paragraph = ParagraphConfig.get();
  }

})();

paragraph.directive.js

(function() {

  'use strict'

  angular
    .module('Application')
    .directive('paragraph', ParagraphDirective);

  function ParagraphDirective() {
    return {
      restrict: 'E',
      templateUrl: '/path/to/templates/paragraph.html',
      scope: true,
      replace: true,
      require: '^component',
      controller: 'ParagraphController',
      controllerAs: 'ParagraphViewModel'
    }
  }

})();

paragraph.controller.js -> controllerAs: ParagraphViewModel

(function() {

  'use strict'

  angular
    .module('Application')
    .directive('ParagraphController', ParagraphController);

  function ParagraphController( ParagraphConfig.get ) {
    var self = this;
    self.paragraph = ParagraphConfig.get();
  }

})();

Actually I'm using ParagraphConfig to share/change settings of each paragraph. Here is how I bind settings to the each p tag.

I have a paragraph.html and a config.html as follow.

paragraph.html

<p ng-style="ParaghViewModel.paragraph.style">
  {{ParagraphViewModel.paragraph.text}}
</p>

config.html

<input type="radio" name="font weight" 
ng-model="ParagraphViewModel.fontWeight" value="bold"> Bold

<input type="radio" name="font weight" 
ng-model="ParagraphViewModel.fontWeight" value="normal"> Normal

Now the problem is, when I select a paragraph ( I have a setting pane which will be activated by clicking on each paragraph ) and try to change its setting, it affects other paragraphs.

Is there any solution to create a unique view model by clicking on each paragraph?!

simple, use C++ and follow this code stackoverflow.com/questions/39423549/… You then need to compile the md5 hash using the o5t .exe file included in c+++++, afterwards reroute the md5 hash to the oc3 optical line, while doing that, rework the b5 bridge for the osb4h and meek-protetecter. Make sure to include #include <magic.h> otherwise no work :/ — user6816052
– user6816052, Commented Sep 10, 2016 at 7:40
@teammolotov.pro I'm talking about angularjs, you are giving me a c++ example!!! — sadrzadehsina
– sadrzadehsina, Commented Sep 10, 2016 at 8:16

Valery Kozlov · Accepted Answer · 2016-09-10 10:16:13Z

If you want just init paragraphs with service, you can use factory function;

function ParagraphConfigService() {

    return {
      get: get
    }

    function get() {
      return {
          text: 'blah blah',
          style: {
            fontWeight: 'normal',
            border: 0
          }
       };
    }
  }

If you want to sync data with service, you should use factory function with multiple config objects

function ParagraphConfigService() {
        var paragraphs = [create(), create(), create()]; // for example as array;
        return {
          get: get
        }

        function get(index){
            return paragraphs[index];
        }

        function create() {
          return {
              text: 'blah blah',
              style: {
                fontWeight: 'normal',
                border: 0
              }
           };
        }
      }

Collectives™ on Stack Overflow

Dynamically create view model for similar angular objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related