Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bo Jacobsen 590 posts 2366 karma points
    Sep 08, 2016 @ 12:29
    Bo Jacobsen
    0

    Custom grid editor plugin with isolated directive using ng-model

    Hello again everyone. I have so many angular questions ;)

    This time i am trying to make a directive like the spectrum color picker. I want to be able to use this directive multiple times in the main controller. The problem is when i dont use an isolated scope then the value update all fields using the same directive. And if i use an isolated scope, then my ng-model contains nothing.

    This is what i got. And i have tried to make it as simple as possible.

    /* Controller */
    angular.module("umbraco").controller("MyPluginController", function ($scope) {
    
        $scope.control.value = $scope.control.value || [];
    
        $scope.onFakeClick = function () {
            $scope.control.value.push({value: $scope.fakeValue});
            $scope.fakeValue = "";
        }
    
    });
    
    /* Controller View */
    <div ng-controller="MyPluginController">
        <my-directive ng-model="fakeValue" />
        <button type="button" class="btn-primary" ng-click="onFakeClick()">Add</button>
    </div>
    
    /* Directive */
    angular.module("umbraco.directives").directive('myDirective', function (assetsService) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: '/.../template.html',
            require: "ngModel",
            scope: {},
            link: function (scope, element, attr, ctrl) {
    
                ctrl.$render = function () {
    
                    scope.inputValue = ctrl.$viewValue;
    
                    assetsService.load(["/.../javascript.js"]).then(function () {
    
                        var ele = element.find('input[name="fakeInput_' + scope.$id + '"]');
    
                        ele.val(ctrl.$viewValue);
    
                        ele.on('change', function () {
                            scope.inputValue = ele.val();
                            ctrl.$setViewValue(scope.inputValue);
                        }); 
    
                    });
    
                    assetsService.loadCss("/.../style.css");
    
                };          
            }
        };
    });
    
    /* Directive Template */
    <div>
        <input ng-model="inputValue" name="fakeInput_{{$id}}" />    
    </div>
    

    Can anyone tell me what i have to do? Thanks!

  • Nandoh 32 posts 104 karma points
    May 12, 2017 @ 17:18
    Nandoh
    0

    Hi Bo,

    Did you manage to get it working? I'm having a simular question when using a directive that I've developed using an isolated scope, when it renders the templateUrl view the associated ng-controller doesn't have the properties that I set using the isolated scope.

    angular.module('umbraco').directive('lwMemberpicker', function () {
    return {
        scope: {
            model: '='
        },
        //transclude: true,
        restrict: 'E',
        replace: true,
        templateUrl: 'views/propertyeditors/memberpicker/memberpicker.html' 
    };});
    

    I pass a value to the model, but then in the memberpicker.controller it has no 'model' property in the $scope.

    Thanks

  • Bo Jacobsen 590 posts 2366 karma points
    May 15, 2017 @ 10:23
    Bo Jacobsen
    100

    Hi Nandoh.

    Yes i got it working. But forgot to put the result here.

    In my case it was like this

    /* Directive */
    angular.module("umbraco.directives").directive('myDirective', function (assetsService) {
        return {
            restrict: 'EA',
            replace: true,
            templateUrl: '/.../template.html',
            require: "ngModel",
            scope: {
                ngModel: '=ngModel'
            },
            link: function (scope, element, attr, ctrl) {
    
                var myNgModel = scope.ngModel; // Get value 
                scope.ngModel = "My new value"; // Set value
    
            }
        };
    });
    
  • Nandoh 32 posts 104 karma points
    May 15, 2017 @ 10:54
    Nandoh
    0

    Thank you very much for your answer :)

    Let me ask you one final question...in your 'template-html', do you have any ng-controller initialisation? I assume not, according to the markup in your first post :)

    Thanks. Regards

  • Bo Jacobsen 590 posts 2366 karma points
    May 18, 2017 @ 08:34
    Bo Jacobsen
    0

    Right.

    I do not use ng-controller for my directives, just a div.

    In a simple input i would do this.

    <div>
        <input ng-model="ngModel" name="fakeInput_{{$id}}" />    
    </div>
    

    If its simple like this you could also remove the templateUrl and just use it directly in your html <input type="text" my-directive ng-model="myModel" /> or <div my-directive ng-model="myModel"></div>, Just remeber to use transclude if you have something inside the div.

    Cheers.

Please Sign in or register to post replies

Write your reply to:

Draft