Hi folks,

I'm using Forms 7.0.5 on an Umbraco 7.13.1 installation. I've managed to set up a custom field type, no problem. Now I'd like to set up a custom view for a [Setting] (which can be done by specifying the "view" value in the attribute).

The view is rendering, but events aren't binding. Here's my code:

angular.module("umbraco.directives")
.directive('ccFormsInlineKeyedPrevalueEditor', function (notificationsService) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '/App_Plugins/cc/views/umb-forms-inline-prevalue-keyed-editor.html',
        require: "ngModel",
        link: function (scope, element, attr, ctrl) {
            scope.prevalues = [];

            ctrl.$render = function () {
                if (Object.prototype.toString.call(ctrl.$viewValue) === '[object Array]') {
                    scope.prevalues = ctrl.$viewValue;
                }
            };

            function updateModel() {
                ctrl.$setViewValue(scope.prevalues);
            }

            function addKeyedPrevalueData() {

                //Check that our array does not already contain the same item
                if (scope.prevalues.indexOf(scope.newPrevalueKey) < 0) {
                    scope.prevalues.push({ "key" : scope.newPrevalueKey, "value" : scope.newPrevalueValue });
                    scope.newPrevalueKey = '';
                    scope.newPrevalueValue = '';
                    updateModel();
                } else {
                    //Notify user they are trying to add a prevalue that already exists
                    notificationsService.error("PreValue Error", "Unable to add PreValue as this is a duplicate");
                }
            }

            scope.addPrevalue = function () {
                alert("Saving prevalue");
                addKeyedPrevalueData();
            };

        }
    };
});

With markup:

<form ng-submit="addPrevalue()" class="umb-form-prevalue">
    <i class="icon icon-add blue"></i>
    <input type="text" placeholder="Add Key" class="inline-editor prevalue" prevent-default ng-model="newPrevalueKey" />
    <input type="text" placeholder="Add Value" class="inline-editor prevalue" prevent-default ng-model="newPrevalueValue" />
    <small ng-show="newPrevalueKey && newPrevalueValue">Press enter to add a value</small>
</form>

(This is included as a directive like so:)

<div ng-if="field.prevalueSourceId == null && field.removePrevalueEditor !== true || field.prevalueSourceId == '00000000-0000-0000-0000-000000000000' && field.removePrevalueEditor !== true">
    <cc-forms-inline-keyed-prevalue-editor ng-model="field.preValues" />
</div>

And finally, the C# attribute code:

[Setting("Field Titles", alias ="field_titles", view="~/App_Plugins/cc/views/multivalueswithkeys.html")]
public Dictionary<string, object> FieldTitles { get; set; }

So I'd expect the directive to bind to the scope (it binds and markup shows up, but the scope.addPrevalue is never called).

Any pointers would be most appreciated.

Thanks,

Benjamin