How to pass bidirectional parameters to an AngularJS directive

0

I need the parameterID="{{autor.ID}} attribute that in the directive is parameterID: '@' to be updated as soon as it is changed, that is, I need the bind to be bidirectional, I have seen in several places saying to use parameterID: '=' but only that I am facing with this error.

  

ERROR: angular.js: 14700 Error: [$ compile: nonassign] link $ compile / nonassign? p0 = undefined & p1 = parameterID & p2 = navigator       at angular.js: 88       at x (angular.js: 10619)       at q (angular.js: 10632)       at angular.js: 16659       at m. $ digest (angular.js: 18253)       at m. $ apply (angular.js: 18531)       at 1 (angular.js: 12547)       at s (angular.js: 12785)       at XMLHttpRequest.y.onload (angular.js: 12702)

     

Calling the Navigator component

<navigator edit="false" create="true" view="false" urlCreate="/Autor/Create" urlEdit="/Autor/Editar/{{autor.ID}}" urlList="/Autor" registroCadastradoComSucesso="{{registroCadastradoComSucesso}}" parameterID="{{autor.ID}}">

    </navigator>
  

Policy

angular.module('app').directive('navigator', [function () {
    return {
        templateUrl: './AngularJS/view/Navigator/Navigator.html',
        restrict: 'E',
        scope: {
            edit: '@edit',
            create: '@create',
            view: '@view',
            urlCreate: '@urlCreate',
            urlEdit: '@urlEdit',
            urlList: '@urlList',
            parameterID: '@parameterID',
            registroCadastradoComSucesso: '@registroCadastradoComSucesso'
        },
        transclude: true,
        link: function ($scope, element, attrs) {
            $scope.urlCreate = attrs.urlcreate;
            $scope.urlEdit = attrs.urledit;
            $scope.urlList = attrs.urllist;

            $scope.edit = attrs.edit;
            $scope.create = attrs.create;
            $scope.view = attrs.view;

            $scope.registroCadastradoComSucesso = attrs.registrocadastradocomsucesso;
            $scope.parameterID = attrs.parameterid;
        },
        controller: function ($scope) {
            $scope.remove = $scope.$parent.delete;
        }
    }

}]);
  

Navigator HTML Page

<!-- BARRA DE NAVEGAÇÃO -->
<div>
    <ol class="breadcrumb" ng-show="create">
        <li ng-if="!registroCadastradoComSucesso" class="active"> Novo </li>
        <li ng-if="registroCadastradoComSucesso"><a ng-href="#!{{urlCreate}}"> Novo </a></li>
        <li ng-if="!registroCadastradoComSucesso" class="active"> Editar </li>
        <li ng-if="registroCadastradoComSucesso"><a ng-href="#!{{urlEditar}}"> Editar </a></li>
        <li ng-if="!registroCadastradoComSucesso" class="active"> Deletar </li>
        <li ng-if="registroCadastradoComSucesso"><a ng-href="#!{{urlDelete}}" ng-click="remove(1)"> Deletar </a></li>
        <li><a ng-href="#!{{urlList}}"> Listar Autores </a></li>
    </ol>
</div>
    
asked by anonymous 29.11.2017 / 01:51

1 answer

0

Ever see if {{author.id}} has any value or if it comes undefined? Test with static value and see if it works.

One detail I've seen in the documentation is that in the .JS of the policy you use the standard camel-case but in HTML you replace the camel-case with (urlEdit) url- edit in HTML)

 <navigator edit="false" create="true" view="false" url-create="/Autor/Create" url-edit="/Autor/Editar/{{autor.ID}}" url-list="/Autor" registro-cadastrado-com-sucesso="{{registroCadastradoComSucesso}}" parameter-id="{{autor.ID}}">

    </navigator>

Give a control-f "Isolating the Scope of a Directive" here

    
29.11.2017 / 02:49