Is there a sample out there on how to properly use ig.loader with the igniteui angular directives?
I use ig.loader to load up my necessary igniteui components on demand, which means they are not loaded yet when the angular binding starts, which is causing it to crash.
All of the samples I have been able to find do not use the ig.loader.
Currently I am trying to use the ig-grid directive with data-source="ds":
<ig-grid id="grdItems" data-source="ds" auto-generate-columns="false">
<columns>
<column key="type" header-text="Type" data-type="number">column>
<column key="name" header-text="Name" data-type="string">column>
<column key="value" header-text="Value" data-type="number">column>
<column key="weight" header-text="Weight" data-type="number">column>
columns>
ig-grid>
Where ds is defined in my controller as:
$scope.ds = new $.ig.RemoteDataSource({
type: "remoteUrl",
dataSource: params.getItemsUrl,
responseDataType: "json",
responseDataKey: "items"
});
And my datasource is never getting called
Here is a jsFiddle that is similar to what I am trying to do, except it uses a normal JSONDataSource instead of a RemoteDataSource:
http://jsfiddle.net/apmcmillan/tyeue8zu/
Hello Rsimm,
Let me know if you have further questions regarding this subject.
Best regards,Martin PavlovInfragistics, Inc.
Try with the following sample: http://jsfiddle.net/tyeue8zu/25/
Currently a dependency should be defined so that the scripts can be loaded in the correct order. We will fix that requirement in our next Service Release.
To define a dependency use the following code:
$.ig.dependencies.push( {
widget: 'igniteui-angular',
dependency: [{name: "igGrid.*"}],
scripts: ['$path$/extensions/igniteui-angular.js']
And then when configuring the loader in the "resources" use just the widget name which in this case is "igniteui-angular".
The last thing to note is that you should bind to a plain object in the $scope, otherwise the Angular framework will throw an error.
If you want to bind to remote data source you can do the following:
sampleApp.controller('sampleAppCtrl', function ($scope) {
$scope.restUrl = "http://www.igniteui.com/api/products?callback=?";
And then:
<ig-grid id="grid1"
data-source="restUrl"
primary-key="id"
auto-generate-columns="false"
auto-commit="true"
response-data-key="d.results.Results"
response-total-rec-count-key="d.results.Count"
width="600px">
<!--code omitted-->
</ig-grid>
But this way you'll lose the two-way data binding.
To keep the two-way data binding you can use the approach demonstrated in this sample:
http://igniteui.github.io/igniteui-angular/samples/grid/master-detail/index.html
Which uses $http and $q services.
Hope this helps, Martin Pavlov Infragistics, Inc.