AngularJS directive with isolate scope, ng-repeat, and controllerAs

2018-11-08 08:10 Zack imported from Stackoverflow

function directive() {
  return {
    restrict: 'E',
    template: '<button ng-repeat="x in j.array" ng-click="j.set(x)">{{x}}</button>',
    replace: true,
    //scope: {},
    bindToController: {
      array: '=',
      answer: '='
    },
    controller: function() {
      var j = this;
      j.set = function(data) {
        j.answer = data;
      };
    },
    controllerAs: 'j'
  };
}

When I uncomment scope and create an isolate scope the directive no longer works. I'm trying to determine why.
Normally I still have access to the controllerAs in an ng-repeat, in this example when I lose it it's still available on $parent.j. I think there are 3 solutions.

Solution 1 is to leave it not in isolate scope.
Solution 2 would be to convert every reference to j inside the repeat to $parent.j.
Solution 3 is that there is some way to use j without having to use $parent that I'm unaware of.

1 answer

answered 2018-11-08 10:08 Sophie
It may be to do with the replace: true. If you wrap the button in a div, it seems to work! I've made a little Plunker here to demonstrate.

See also questions close to this topic

Server dosen't reconognize mondodb module whit angular

I'm trying run a server configuration whit this instruccion.

forever start --uid "mns_server_dev_7200" index.js.

but I can't, I have this error

module.js:549
throw err;
^

Error: Cannot find module 'mongoose'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (/mns_server/index.js:12:16)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3) error: Forever detected script exited with code: 1

but in my npm list I have installed the module 'mongoose'
part of modules list

so, I have been readding about this bug but I couldn't resolve it
Best way to store password in web and AngularJS 1.5?

I need to store the login and password to re-login to an API as the session expires every hour or so. I am only using AngularJS. Can anyone please recommend the best practices to do this? Thanks.
How to select multiple values, using Ctrl+Shift, in AngularJS
I have a grid in AngularJS. Currently the user can select only one row at a time. The requirement now, is to be able to select multiple rows.

Right now it looks like this:
```
angular.element(function () {
        document.getElementById("gridId").src = document.location.protocol + '//' + document.location.hostname + ':8888/myPage.aspx?' + window.location.search.substr(1);

    });
```
This selects only one row at a time. I've tried using getElementsByClassName and including a class tag in the div that wraps my grid but this selects all elements. I want to get only the rows selected by the user, while using Ctrl+Shift to select rows. Also I need to set the 'src' property which getElementsByClassName doesn't have.

I think I need to modify my script so getElementById gets the rows selected when the ctrl+shift event is triggered but I'm not sure how. Or is there a better way of doing it?
bind html tags in angular js with curly brackets {{}}
I have a function that replace predefined special charter in resource (.resx) file with some html tags as I can't write the html tags into resource (.resx) file for example if I had @b@ Test @cb@ it will be replaced with  test  by using below function.
```
function processTranslationText(value) {
 return value
 .replace(/@b@/g, '')
 .replace(/@b2@/g, '')
 .replace(/@cb@/g, '')
 }

var str = common.translation.translateWithValue('ambCompmsg');
// where ambCompmsg = Win @b@Ambassador badge@cb@ and @b@50pt@cb@ when you bla bla bla
$scope.ambCompmsg = referralCodeCntrl.processTranslationText(str);
```
when I bind {{ambCompmsg}} in curly brackets the output appears like Win Ambassador badge and 50pt as a text not compiled html but it works well when I use data-ng-bind-html="ambCompmsg"

what I need is to have the same result of data-ng-bind-html by using the curly brackets

How to add Plugin to Tinymce in AngularJS

I am using Tinymce for Blogs and Need to Add a few Plugins into it. How do I do that using AngularJS. Also, please note that I am making a directive for the same. I have been trying real hard but unfortunately I was not able to solve it.

Following is my code for AngularJS which I am using for TinyMce:

angular.module('ui.tinymce', [])
.value('uiTinymceConfig', {})
.directive('uiTinymce', ['uiTinymceConfig', function (uiTinymceConfig) {
    uiTinymceConfig = uiTinymceConfig || {};
    var generatedIds = 0;
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ngModel) {
            var expression, options, tinyInstance,
            updateView = function () {
                ngModel.$setViewValue(elm.val());
                if (!scope.$$phase) {
                    scope.$apply();
                }
            };
            // generate an ID if not present
            if (!attrs.id) {
                attrs.$set('id', 'uiTinymce' + generatedIds++);
            }

            if (attrs.uiTinymce) {
                expression = scope.$eval(attrs.uiTinymce);
            } else {
                expression = {};
            }
            options = {
                // Update model when calling setContent (such as from the source editor popup)
                setup: function (ed) {
                    var args;
                    ed.on('init', function (args) {
                        ngModel.$render();
                    });
                    // Update model on button click
                    ed.on('ExecCommand', function (e) {
                        ed.save();
                        updateView();
                    });
                    // Update model on keypress
                    ed.on('KeyUp', function (e) {
                        ed.save();
                        updateView();
                    });
                    // Update model on change, i.e. copy/pasted text, plugins altering content
                    ed.on('SetContent', function (e) {
                        if (!e.initial) {
                            ed.save();
                            updateView();
                        }
                    });
                    if (expression.setup) {
                        scope.$eval(expression.setup);
                        delete expression.setup;
                    }
                },
                mode: 'exact',
                elements: attrs.id
            };
            // extend options with initial uiTinymceConfig and options from directive attribute value
            angular.extend(options, uiTinymceConfig, expression);
            setTimeout(function () {
                tinymce.init(options);
            });


            ngModel.$render = function () {
                if (!tinyInstance) {
                    tinyInstance = tinymce.get(attrs.id);
                }
                if (tinyInstance) {
                    tinyInstance.setContent(ngModel.$viewValue || '');
                }
            };
        }
    };
}]);

Below is how I am using Tinymce to display TextArea:

<textarea name="tinymce" class="tinymce"></textarea>

Display text box onClicking checkbox(custom directive) - Angular JS

Following is the a HTML code which has a custom directive in it.

<div id="habits" style="margin-top: 70px; margin-left: 23px" ng-controller="contl as ctrll">
    <content-item ng-repeat="item in ctrll.content" content="item">
    </content-item>
    <div ng-repeat="item in ctrll.content" content="item" ng-if ="item.onSelection">
          <div ng-repeat="onSelection in item.onSelection">                          
              <higi-text-field-new field="registerModal.fields[20]">{{onSelection.title}}<br />
                       {{onSelection.type}}
              </higi-text-field-new> 
          </div>  
     </div>
</div>

content-item directive has the following template(one checkbox and it's respective label). I need to retrieve checkbox id which was created dynamically using getElementById() to check whether checkbox is checked or not and then create text boxes

<div style='margin-top:70px,margin-left:50px'>
    <label class='containerr'>
        <input type='checkbox' id = '{{content.title}}'>
        <span class='checkmarkk'>
        </span>
     </label>
     <div id='mytitle' style='margin-left:30px'>{{content.titles}}
     </div>
 </div>
 </div>

SO far i tried to convert html code to JSON so that i can retrieve checkbox id but the json data is huge and I am not sure how to proceed with retrieving checkbox ID. Purpose is to display text box if a specific habit(check box) is selected

var initElement = document.getElementById("perhiscontainer")
var json = mapDOM(initElement, true);
console.log(json);

function mapDOM(element, json) {
var treeObject = {};

// If string convert to document Node
if (typeof element === "string") {
    if (window.DOMParser) {
          parser = new DOMParser();
          docNode = parser.parseFromString(element,"text/xml");
    } else { // Microsoft strikes again
          docNode = new ActiveXObject("Microsoft.XMLDOM");
          docNode.async = false;
          docNode.loadXML(element); 
    } 
    element = docNode.firstChild;
}

//Recursively loop through DOM elements and assign properties to object
function treeHTML(element, object) {
    object["type"] = element.nodeName;
    var nodeList = element.childNodes;
    if (nodeList != null) {
        if (nodeList.length) {
            object["content"] = [];
            for (var i = 0; i < nodeList.length; i++) {
                if (nodeList[i].nodeType == 3) {
                    object["content"].push(nodeList[i].nodeValue);
                } else {
                    object["content"].push({});
                    treeHTML(nodeList[i], object["content"][object["content"].length -1]);
                }
            }
        }
    }
    if (element.attributes != null) {
        if (element.attributes.length) {
            object["attributes"] = {};
            for (var i = 0; i < element.attributes.length; i++) {
                object["attributes"][element.attributes[i].nodeName] = element.attributes[i].nodeValue;
            }
        }
    }
}
treeHTML(element, treeObject);

return (json) ? JSON.stringify(treeObject) : treeObject;
}

JSON Output

"type":"DIV","content":["\n    ",{"type":"#comment"},{"type":"CONTENT-ITEM","content":[{"type":"DIV","content":[{"type":"LABEL","content":[{"type":"INPUT","attributes":{"type":"checkbox","id":"Tobacco Chewing"}},{"type":"SPAN","attributes":{"class":"checkmarkk"}}],"attributes":{"class":"containerr"}},{"type":"DIV","content":["Tobacco Chewing"],"attributes":{"id":"personalhis_title","style":"margin-left:30px","class":"ng-binding"}}],"attributes":{"id":"Tobacco Chewing","style":"margin-top:70px,margin-left:50px","class":"ng-scope"}}],"attributes":{"ng-repeat":"item in ctrll.content","content":"item","class":"ng-scope ng-isolate-scope"}},{"type":"#comment"},{"type":"CONTENT-ITEM","content":[{"type":"DIV","content":[{"type":"LABEL","content":[{"type":"INPUT","attributes":{"type":"checkbox","id":"Smoking"}},{"type":"SPAN","attributes":{"class":"checkmarkk"}}],"attributes":{"class":"containerr"}},{"type":"DIV","content":["Smoking"],"attributes":{"id":"personalhis_title","style":"margin-left:30px","class":"ng-binding"}}],"attributes":{"id":"Smoking","style":"margin-top:70px,margin-left:50px","class":"ng-scope"}}],"attributes":{"ng-repeat":"item in ctrll.content","content":"item","class":"ng-scope ng-isolate-scope"}},{"type":"#comment"},{"type":"CONTENT-ITEM","content":[{"type":"DIV","content":[{"type":"LABEL","content":[{"type":"INPUT","attributes":{"type":"checkbox","id":"Alcohol"}},{"type":"SPAN","attributes":{"class":"checkmarkk"}}],"attributes":{"class":"containerr"}},{"type":"DIV","content":["Alcohol"],"attributes":{"id":"personalhis_title","style":"margin-left:30px","class":"ng-binding"}}],"attributes":{"id":"Alcohol","style":"margin-top:70px,margin-left:50px","class":"ng-scope"}}],"attributes":{"ng-repeat":"item in ctrll.content","content":"item","class":"ng-scope ng-isolate-scope"}},{"type":"#comment"},{"type":"CONTENT-ITEM","content":[{"type":"DIV","content":[{"type":"LABEL","content":[{"type":"INPUT","attributes":{"type":"checkbox","id":"Bowel"}},{"type":"SPAN","attributes":{"class":"checkmarkk"}}],"attributes":{"class":"containerr"}},

Related questions

AngularJS directive with isolate scope, ng-repeat, and controllerAs

1 answer

See also questions close to this topic