How to pass bidirectional parameters to an Angularjs directive

Question

I need the attribute parameterID="{{autor.ID}} which in the Directive is parameterID: '@' be updated as soon as it is changed, that is, I need the bind to be bideretional, I saw in several places saying to use the parameterID: '=' but only that I’m faced with this mistake.

ERROR: angular.js:14700 Error: [$Compile:nonassign] http://errors.angularjs.org/1.6.6/$Compile/nonassign? P0=undefined&p 1=parameterID&p 2=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 l (angular.js:12547) at s (angular.js:12785) at Xmlhttprequest.y.onload (angular.js:12702)

Call 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>

Directive

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>

Answer 1

Have you seen if {{author.id}} has any value or if it comes Undefined? Test with static value and see if it works.

One detail I saw in the documentation is that in . JS of the directive you use the default Camel-case but in HTML you replace Camel-case with hyphens (urlEdit would be 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>

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