custom grid editor plugin with isolated directive using ng model - Developing Packages

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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 606 posts 2404 karma points

Sep 08, 2016 @ 12:29

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!

Copy Link

Nandoh 32 posts 104 karma points

May 12, 2017 @ 17:18
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
Copy Link

Bo Jacobsen 606 posts 2404 karma points

May 15, 2017 @ 10:23

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

        }
    };
});

Copy Link

Nandoh 32 posts 104 karma points

May 15, 2017 @ 10:54

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

Copy Link
Bo Jacobsen 606 posts 2404 karma points

May 18, 2017 @ 08:34
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.
Copy Link
is working on a reply...

Please Sign in or register to post replies