2

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

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

我通过这段代码得到了这个工作

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

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

4

2 回答 2

11

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

更惯用的方法可能是在 Angular 端使用指令，并将事件调度器控制器传递给秘银端的视图：

//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-14T14:15:25.057 回答
0 

// 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>

于 2016-09-14T18:21:23.013 回答