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 に答える