Forum Discussion

guptak13's avatar
guptak13
Helper
4 years ago

External Angular JS Plugin is not working in Lithium Angular

Hi,

I want to use an external AngularJs plugin within the angular app and below the code where we tried but no luck.
Following is a code sample.
Attached plugin: angularjs-dropdown-multiselect.min.js

<script type="text/javascript" src="/html/assets/lodash.min.js"></script>
<script type="text/javascript" src="/html/assets/angularjs-dropdown-multiselect.min.js"></script>

 

<div id="myFirstApp" ng-app="myFirstApp" ng-controller="myFirstCtrl" class="lia-page lia-content lia-top-quilt" li-bindable>

<div id="deliveryType" ng-dropdown-multiselect="" options="deliveryType" selected-model="selectedDeliveryType" checkboxes="true" extra-settings="deliveryTypeSettings" translation-texts="deleveryTypeText" class="dropdown-multiselect-button" events=""></div>

</div>

<@liaAddScript angular="true">
;(function (angular) {
 var coreModuleDeps = LITHIUM.AngularSupport.getOptions().coreModuleDeps || [];
coreModuleDeps.push('myFirstApp');

 LITHIUM.AngularSupport.setOptions({ coreModuleDeps: coreModuleDeps });

angular.module('myFirstApp', ['angularjs-dropdown-multiselect']).controller('myFirstCtrl', ['$scope', function ($scope) {

     $scope.deliveryType = [{"id":"ILTc","label":"Live Instructor Led Training - Classroom"},{"id":"ILTv","label":"Live Instructor Led Training - Virtual"},{"id":"ODC","label":"On-Demand - Self-Paced Classroom"},{"id":"ODLe","label":"On-Demand Learning"},{"id":"ODLab","label":"On-Demand Lab"},{"id":"ODS","label":"On-Demand Subscription"}];
     $scope.selectedDeliveryType = [];
     

     $scope.deliveryTypeSettings = {
          scrollableHeight: 'auto',
          scrollable: true,
          showCheckAll: false,
          showUncheckAll: false
     };
     
$scope.deleveryTypeText = {
          checkAll: 'Check All',
          uncheckAll: 'Uncheck All',
          selectionCount: 'checked',
          selectionOf: '/',
          searchPlaceholder: 'Search...',
          buttonDefaultText: '--Select Delivery Type--',
          dynamicButtonTextSuffix: 'checked'
     };

}]);
})(LITHIUM.angular);
</@liaAddScript>

 

Could you please guide us to resolve this issue?

 

Thanks!
Kamlesh 

    • guptak13's avatar
      guptak13
      Helper
      4 years ago

      Thanks, peterlu, 

      I have added "LITHIUM.angular" at the last in the external plugin script but still, I am getting issues as below.

      Error: Uncaught TypeError: Cannot read property 'module' of undefined


      I have attached the error screenshot.

       Could you please guide us to resolve this issue?

      • peterlu's avatar
        peterlu
        Champion
        4 years ago

        guptak13 You can view the page source, to check the ordering of the script loading. Since LiaAddScript prints the JS code at the very end of the page source, so you need to include your library code in Khoros way.

        You can try to copy the angularjs-dropdown-multiselect.min.js code, and paste it into the LiaAddScript section. Also you need to modify the angularjs-dropdown-multiselect.min.js a bit to make it work. Also check the LITHIUM.angular version as well to make sure your plugin is compatible.

        It is the same problem when you try to include a 3rd party jQuery plugin. 

         

        if worse comes to worst, you can try React.js

  • cblown's avatar
    cblown
    Boss
    4 years ago

    What console errors (if any) are you seeing in the browser? 

    • guptak13's avatar
      guptak13
      Helper
      4 years ago

      Hi cblown ,

      I have attached an error screenshot. 

      Thanks!