Odoo 10 with AngularJS

I'm trying to create a web extension using AngularJS, however, I did the following:

  • I created the widget and I rendered it.
  • I tried to put ng-app and ng-controller on some rendered divs, and the result was there was no response at all.

It seemed like odoo only support Backbone.js with Marionnette.js. I also tried to do the same with React.JS but nothing worked.

This is my code.

resources.xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
 <data>
    <!-- Adds all assets in Odoo -->
    <template id="assets_backend" name="static_resources_demo assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/odoo_angular/static/src/js/lib/angular.min.js"></script>
            <script type="text/javascript" src="/odoo_angular/static/src/js/controller/firstCtrl.js"></script>
            <script type="text/javascript" src="/odoo_angular/static/src/js/angular_odoo.js"></script>
        </xpath>
    </template>
 </data>
</odoo>

angular_view.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="angular_view_odoo">
     <div t-name="angular_view_test" class="container">
       <div class="row box">
         <div ng-app="myApp" ng-controller="myCtrl">

            First Name:
            <input type="text" ng-model="firstName"/>
            <br/>
            Last Name:
            <input type="text" ng-model="lastName"/>
            <br/>
            <br/>
            Full Name: {{firstName + " " + lastName}}

        </div>
     </div>
   </div>
</templates>

angular_odoo.js

odoo.define('odoo_angular', function (require) {
"use strict";
var ajax = require('web.ajax');
var Widget = require('web.Widget');
var core = require('web.core');
var Model = require('web.Model');

var QWeb = core.qweb;
var _t = core._t;

// here we are getting the value in an array.
   var widget_name = Widget.extend({

      init: function (parent, context) {
          var self = this;
          this.context = context;
          this._super(parent);

      },

      start: function () {
          var self = this;

          this._super();
          this.$el.empty().append(QWeb.render("angular_view_test",{}));
      },
   });

   core.action_registry.add('angular_view', widget_name);
   return widget_name;
 });

firstCtrl.js

  var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {

    if($scope.firstName === 'Test')
        console.log('OK');
  });

And this is the result

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.