Webix 4.3模块未在Angularjs中加载

时间：2017-06-08 08:37:42

标签： angularjs webix

我对新的Webix 4.3版本有疑问：

angular.js:66 Uncaught Error: [$injector:modulerr] Failed to instantiate 
module monitorApp due to:
Error: [$injector:modulerr] Failed to instantiate module webix due to:
Error: [$injector:nomod] Module 'webix' is not available! You either 
misspelled the module name or forgot to load it. If registering a module 
ensure that you specify the dependencies as the second argument.

我只是从4.2更新版本时出现此错误，这是我如何注入模块：

var app=angular.module("monitorApp", ['webix', 'ngRoute','ui.router']);

HTML：

<!--Includes-->
<script src="Scripts/angular.js"></script>
<script src="Scripts/webix.js"></script>

关于它会发生什么的任何想法？

2 个答案:

答案 0 :(得分：1)

从Webix 4.3开始，AngularJs集成是一个单独的模块 https://docs.webix.com/desktop__whats_new_4_3.html

你可以从github上获取它 https://github.com/webix-hub/webix-angular

或通过npm安装 npm install webix-angular

答案 1 :(得分：0)

您可以添加一个额外的文件，该文件对于Webix Angular Integration部分是必需的。 

// Code goes here

if (window.angular)

(function(){

  function id_helper($element){
    //we need uniq id as reference
    var id = $element.attr("id");
    if (!id){
      id = webix.uid();
      $element.attr("id", id);
    }
    return id;
  }

  function locate_view_id($element){
    if (typeof $element.attr("webix-ui") != "undefined")
      return $element.attr("id");
    return locate_view_id($element.parent());
  }




//creates webix ui components
angular.module("webix", [])
  .directive('webixUi', [ "$parse", function($parse) {
    return {
      restrict: 'A',
      scope: false,
      link:function ($scope, $element, $attrs, $controller){
        var dataname = $attrs["webixUi"];
        var callback = $attrs["webixReady"];
        var watch = $attrs["webixWatch"];
        var wxRoot = null;
        var id = id_helper($element);

        $element.ready(function(){  
          if (wxRoot) return;

          if (callback)
            callback = $parse(callback);

          //destruct components
          $element.bind('$destroy', function() {
            if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
              wxRoot.destructor();
          });
          //ensure that ui is destroyed on scope destruction
          $scope.$on('$destroy', function(){
            if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
              wxRoot.destructor();
          });

          //webix-ui attribute has some value - will try to use it as configuration
          if (dataname){
            //configuration
            var watcher = function(data){
              if (wxRoot) wxRoot.destructor();
              if ($scope[dataname]){
                var config = webix.copy($scope[dataname]);
                config.$scope =$scope;
                $element[0].innerHTML = "";
                wxRoot = webix.ui(config, $element[0]);
                if (callback)
                  callback($scope, { root: wxRoot });
              }
            };
            if (watch !== "false")
              $scope.$watch(dataname, watcher);
            watcher();
          } else {
          //if webix-ui is empty - init inner content as webix markup
            if (!$attrs["view"])
              $element.attr("view", "rows");
            
            var ui = webix.markup;
            var tmp_a = ui.attribute; ui.attribute = "";
            //FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
            if (typeof $attrs["webixRefresh"] != "undefined")
              wxRoot = ui.init($element[0], $element[0], $scope);
            else
              wxRoot = ui.init($element[0], null, $scope);

            ui.attribute = tmp_a;

            if (callback)
              callback($scope, { root: wxRoot });
          }

          //size of ui
          $scope.$watch(function() {
            return $element[0].offsetWidth + "." + $element[0].offsetHeight;
          }, function() {
            if (wxRoot) wxRoot.adjust();
          });

        });
      }
    };
  }])

  .directive('webixShow', [ "$parse", function($parse) {
    return {
      restrict: 'A',
      scope: false,

      link:function ($scope, $element, $attrs, $controller){
        var attr = $parse($attrs["webixShow"]);
        var id = id_helper($element);

        if (!attr($scope))
            $element.attr("hidden", "true");

        $scope.$watch($attrs["webixShow"], function(){
          var view = webix.$$(id);
          if (view){
            if (attr($scope)){
              webix.$$(id).show();
              $element[0].removeAttribute("hidden");
            } else
              webix.$$(id).hide();
          }
        });

      }
    };
  }])

  .directive('webixEvent', [ "$parse", function($parse) {
    var wrap_helper = function($scope, view, eventobj){
      var ev = eventobj.split("=");
      var action = $parse(ev[1]);
      var name = ev[0].trim();
      view.attachEvent(name, function(){              
        return action($scope, { id:arguments[0], details:arguments });
      });
    };

    return {
      restrict: 'A',
      scope: false,
      
      link:function ($scope, $element, $attrs, $controller){
        var events = $attrs["webixEvent"].split(";");
        var id = id_helper($element);

        setTimeout(function(){
          var first = $element[0].firstChild;
          if (first && first.nodeType == 1)
            id = first.getAttribute("view_id") || id;

          var view = webix.$$(id);
          for (var i = 0; i < events.length; i++) {
            wrap_helper($scope, view, events[i]);
          }
        });

      }
    };
  }])

  .directive('webixElements', [ "$parse", function($parse) {
    return {
      restrict: 'A',
      scope: false,

      link:function ($scope, $element, $attrs, $controller){

        var data = $attrs["webixElements"];
        var id = id_helper($element);
        
        if ($scope.$watchCollection)
          $scope.$watchCollection(data, function(collection){
            setTimeout(function(){
              var view = webix.$$(id);
              if (view){
                view.define("elements", collection);
                view.refresh();
              }
            },1);
          });
      }

    };
  }])

  .directive('webixData', [ "$parse", function($parse) {
    return {
      restrict: 'A',
      scope: false,

      link:function ($scope, $element, $attrs, $controller){

        var data = $attrs["webixData"];
        var id = id_helper($element);
        
        if ($scope.$watchCollection)
          $scope.$watchCollection(data, function(collection){
            if (collection){
              setTimeout(function(){
                loadData($element, id, collection, 0);
              },1);
            }
          });
      }

    };
  }]);

  function loadData($element, id, collection, num){
    if (num > 10) return;
    var first = $element[0].firstChild;
    if (first && first.nodeType == 1)
    id = first.getAttribute("view_id") || id;

    var view = webix.$$(id);
    if (view){
      if (view.options_setter){
        view.define("options", collection);
        view.refresh();
      }else{
        if (view.clearAll)
          view.clearAll();
        view.parse(collection);
      }
    } else {
      webix.delay(loadData, this, [$element, id, collection], 100, num+1);
    }
  }

})();
<!doctype html>
<html lang="en" ng-app="webixApp">

<head>
  <meta charset="utf-8">
  <title>Webix - Angular : Layouts</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
  <script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
  <script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
  <script type="text/javascript" src="script.js"></script>

  <script type="text/javascript">
    var app = angular.module('webixApp', ["webix", 'ui.router']);
    app.config(function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/add");
      $stateProvider
        .state('/add', {
          url: '/add',
          template: 'This is the Routed Addition File'
        })
        .state('/sub', {
          url: '/sub',
          template: 'This is the Routed Subtraction File'
        })
        .state('/div', {
          url: '/div',
          template: 'This is the Routed Division File'
        })
        .state('/multi', {
          url: '/multi',
          template: 'This is the Routed Multiplication File'
        })
    })
    app.controller('jsonCtrl', function($scope) {
      var treeData = {
        data: [{
          id: "root",
          value: "Super Micro Flow",
          open: true,
          link: "add",
          data: [{
            id: "1",
            open: true,
            value: "AP1",
            link: "multi",
            data: [{
              id: "1.1",
              value: "2G09#M10000761",
              link: "div",
              data: [{
                id: "1.11",
                value: "2G09#M10000761",
                link: "add",
                data: [{
                  id: "1.11",
                  value: "2G09#M10000761",
                  link: "sub"
                }, {
                  id: "1.12",
                  value: "2G09#M10855757",
                  link: "multi"
                }, {
                  id: "1.13",
                  value: "2G09#D10PP0761",
                  link: "div"
                }]
              }, {
                id: "1.12",
                value: "2G09#M10855757",
                link: "multi"
              }, {
                id: "1.13",
                value: "2G09#D10PP0761",
                link: "div"
              }]
            }, {
              id: "1.2",
              value: "2G09#M10855757",
              link: "multi"
            }, {
              id: "1.3",
              value: "2G09#D10PP0761",
              link: "div"
            }]
          }, {
            id: "2",
            open: false,
            value: "AP12",
            link: "multi",
            data: [{
              id: "2.1",
              value: "2G09#M10000761",
              link: "sub"
            }, {
              id: "2.2",
              value: "2G09#M10855757",
              link: "multi"
            }, {
              id: "2.3",
              value: "2G09#D10PP0761",
              link: "div"
            }]
          }, {
            id: "3",
            open: false,
            value: "EP45",
            link: "div",
            data: [{
              id: "3.1",
              value: "2G09#M10000761",
              link: "sub"
            }, {
              id: "3.2",
              value: "2G09#M10855757",
              link: "multi"
            }, {
              id: "3.3",
              value: "2G09#D10PP0761",
              link: "div"
            }]
          }, {
            id: "4",
            open: false,
            value: "CR7767",
            link: "sub",
            data: [{
              id: "4.1",
              value: "2G09#M10000761",
              link: "sub"
            }, {
              id: "4.2",
              value: "2G09#M10855757",
              link: "multi"
            }, {
              id: "4.3",
              value: "2G09#D10PP0761",
              link: "div"
            }]
          }]
        }]
      }
      $scope.myTree = {
        view: "tree",
        data: treeData,
        template: "{common.icon()}{common.folder()}<a ui-sref='#link#' href='##link#'>#value#</a>",
      }
    })
  </script>
</head>

<body ng-controller="jsonCtrl">

  <div webix-ui type="space">
    <div height="35">Welcome to Angular Webix App </div>
    <div view="cols" type="wide" margin="10">
      <div width="300">
        <input type="text" placeholder="Type something here" ng-model="app"> Hello {{app}}!
        <div webix-ui="myTree"></div>

      </div>
      <div view="resizer"></div>
      <div view="tabview">
        <div header="Angular UI Routing Example">

          <div ng-controller="jsonCtrl">

            <div ui-view></div>

          </div>


        </div>
      </div>

    </div>


  </div>

</body>

</html>

您可以复制脚本文件并作为独立文件放入您的应用程序。不要在此文件中写任何内容。

相关问题
最新问题