Mithril with angularjs

Я новичок в Mithril JS framework и пытаюсь интегрировать Mitril view с угловымJS. Кто-нибудь пробовал это раньше?Mithril with angularjs

Я хочу проверить, как мы можем привязать методы углового контроллера, чтобы щелкнуть события элементов, созданных в Митриле.

я получил эту работу, имея этот код

var e = document.getElementById('elementId'); 
var scope = angular.element(e).scope(); 
m("a[href='javascript:;']", { 
    onclick : scope.someMethod 
}, "Test");

Но я не уверен, что это правильный способ сделать это.

источник

2014-09-14 Saravanan S

Я бы сказал, что это не идиоматический угловой код.

Более идиоматический способ может быть использовать директиву о Угловом стороны, и передать в контроллере диспетчера событий на вид на MITHRIL стороны:

//mithril code 
var testWidget = function(ctrl) { 
    return m("a[href='javascript:;']", {onclick: ctrl.onclick}, "Test") 
} 

//angular code 
angular.module("foo").directive("testWidget", function() { 
    return { 
    restrict: "E", 
    link: function($scope, element, attrs) { 
     var template = testWidget({ 
     onclick: function() { 
      $scope.$apply(function() { 
      $scope.$eval(attrs.onclick) 
      }) 
     } 
     }) 
     m.render(element, template) 
    } 
    } 
}) 

angular.module("foo").controller("MyCtrl", function() { 
    this.doStuff = function() { 
    console.log("called doStuff") 
    } 
}) 

<div ng-controller="MyCtrl as c"> 
    <test-widget onclick="c.doStuff()"></test-widget> 
</div>

источник

2014-09-14 14:15:25 LeoHorie

Этих является более чистым способом реализации Мифрила в угловом режиме. Спасибо @LeoHorie за решение и Mithril framework. Я попробую это. Это решает мой другой вопрос о том, как создавать шаблоны внутри угловых контроллеров. –

// Code goes here 
 

 
(function() { 
 
\t 'use strict'; 
 

 
\t angular 
 
\t \t .module('app', []) 
 
\t \t .directive('testMithrilScope', testMithrilScope) 
 
\t \t .controller('MyCtrl', MyCtrl); 
 

 
    
 
    var testMithrilWidgetScope = function(ctrl) { 
 
    return m("a[href='javascript:;']", {onclick: ctrl.directiveclick}, ctrl.text) 
 
    } 
 

 

 
    var htmllinks = [ 
 
    {text: "Link 1 "}, 
 
    {text: "Link 2 "}, 
 
    {text: "Link 3 "}, 
 
    {text: "Link 4 "}, 
 
    {text: "Link 5 "}, 
 
    {text: "Link 6 "} 
 
    ]; 
 
    
 
    function testMithrilScope() { 
 
    return { 
 
     restrict: "E", 
 
     scope : { 
 
     htmlclick: '&' 
 
     }, 
 
     link: function($scope, element, attrs) { 
 
     
 
     function makeList1() { 
 
      return m('ul', htmllinks.map(function(a, index){ 
 
      return m('li', testMithrilWidgetScope({ 
 
       directiveclick : function() { 
 
        var data = { 
 
        arg1: a.text 
 
        } 
 
        $scope.htmlclick(data); 
 
       }, 
 
       text : a.text 
 
       }) 
 
      ); 
 
      })); 
 
     } 
 
     
 
     var template1 = makeList1(); 
 
     
 
     m.render(element[0], template1) 
 
     } 
 
    } 
 
    } 
 

 

 

 
    function MyCtrl() { 
 
     this.doStuff = function(text) { 
 
     console.log("You clicked: " + text) 
 
     } 
 
    } 
 

 
})();

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="0.2.4" src="https://cdn.jsdelivr.net/mithril/0.2.4/mithril.js"></script> 
 
    
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 

 
    </head> 
 

 
    <body ng-app="app"> 
 
    
 
    
 
    <div ng-controller="MyCtrl as ctrl"> 
 
     <test-mithril-scope htmlclick="ctrl.doStuff(arg1)"></test-mithril-scope> 
 
    </div> 
 
    </body> 
 

 
</html>

источник

2016-09-14 18:21:23 Dmac

ответ

Смежные вопросы