Question

我是Mithril JS框架的新手，并尝试将Mitril视图与angularJS集成。有人曾尝试过这个吗？

我想检查一下如何将角度控制器方法绑定到单击Mitril中创建的元素的事件。

我通过使用此代码来实现此目的

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

但我不确定这是否是正确的方法。

Answer 1

我说这不是惯用的角度代码。

更惯用的方法可能是在Angular端使用指令，并将事件调度程序控制器传递给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>

Answer 2

// Code goes here

(function() {
	'use strict';

	angular
		.module('app', [])
		.directive('testMithrilScope', testMithrilScope)
		.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="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="mithril@0.2.4" 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>

秘银与angularjs

2 个答案: