radio-button, select: throw error on $mddialog.show() and cancel()

[jeson114]

This happened after i updated my project to RC5 . Every time i close a dialog and try to open it ,it throws
Error: [Error] [$compile:ctreq] Controller 'mdRadioGroup', required by directive 'mdRadioButton', can't be found!
or
Error: [Ara Error] [$compile:ctreq] Controller 'mdSelectMenu', required by directive 'mdOption', can't be found!
When the respective elements are present in a form inside the dialog template

[jeson114]

There is no problem when i downgrade to 0.11.3

[ThomasBurleson]

Please provide a CodePen or Plunkr that demonstrates this issue.

[jeson114]

Ok give me a little time . i ll put up a plunker

[jeson114]

ok while creating the demo i realised that my load functions for md-on-open and similarly the get functions for creating radio buttons were not asynchronous . So instead i used $q in those functions and it works now.

  vm.getLanguages = function () {
        var results = [];
        var deferred = $q.defer();
        masterService.meta('Languages').get().$promise.then(function (data)    {console.log("Languages", data);
            angular.forEach(data.value, function (value, key) {
                results.push({
                    Id: value.Id,
                    Name: value.Name
                });
            });
            deferred.resolve(results);
            console.log(results);
            return deferred.promise;
        });
        vm.languages = results;
        console.log("langs",vm.languages);
        return results;
    }

[mohsinmuzawar]

+1

[jeson114]

Still facing the same problem [$compile.ctreq] on close and reopen of a $mddialog ..

[topherfangio]

@jeson114 Are you able to create a Codepen demo that we can reproduce the error?

[claudiozanin]

I discovered an other solution described below.

First I placed the HTML of the fields that was throwing the exceptions of Angular inside a NG-REPEAT code, and in JavaScript code of Angular I did a push inside the list when the interface was ready to be built.

Below my HTML before the changes:

<div class="form-group" layout="row" flex>
<md-input-container layout="column" flex>
    <label>Field Name</label>
    <md-select ng-model="service.selectedChart.serieField">
        <md-option ng-repeat="column in columns" ng-value="column.columnName">
            {{column.columnName}}
        </md-option>
    </md-select>
</md-input-container>
</div>

HTML after changes:

<div ng-repeat="control in controls"><div class="form-group" layout="row" flex>
<md-input-container layout="column" flex>
    <label>Field Name</label>
    <md-select ng-model="service.selectedChart.serieField">
        <md-option ng-repeat="column in columns" ng-value="column.columnName">
            {{column.columnName}}
        </md-option>
    </md-select>
</md-input-container>
</div></div>

In JavaScript, before to fill the information in my models to present the options of my md-select I set my NG-REPEAT model with an empty Array, like this:

$scope.controls = [];

After all data got ready to be presented, I just append a new item in my array with this command.

$scope.controls = [{}];

I used this code in 3 places of my application and it worked fine. These fields was in forms placed inside $mdDialog.

[Undrium]

This error occurs when you use a mddialog with a template (containing for instance mdSelect-elements) attached. If this template has a directive linked the mdselect elements will drop this error if dialog is closed down and opened again. I can reproduce this without asynchronous calls, so that's not the problem. Unfortunately plnkr is currently down so I cannot provide an example.