저는 Mithril JS 프레임 워크의 초보자이며 Mitril 뷰와 angularJS를 통합하려고합니다. 아무도 전에 이것을 시도 했습니까?angularjs가있는 미스릴
Mitril에서 생성 된 요소의 클릭 이벤트에 각도 컨트롤러 메서드를 바인딩 할 수 있는지 확인하고 싶습니다.
는이 코드var e = document.getElementById('elementId');
var scope = angular.element(e).scope();
m("a[href='javascript:;']", {
onclick : scope.someMethod
}, "Test");
을함으로써이 작업을 얻었다 그러나 문제는이 작업을 수행하는 올바른 방법입니다 있는지 확실하지 않다.
나는 그것이 관용적 인 각도 코드가 아니라고 말하고 싶습니다.
//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>
// 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>
이것 :
더욱 관용적 방법은 각 측의 지시자를 사용하고 미스릴 측에서 볼 수있는 이벤트 발송자 컨트롤러에 전달할 수도 Mithril을 각도로 구현하는 더 깨끗한 방법입니다. 해결책과 미스릴 프레임 워크에 대해 @LeoHorie에게 감사드립니다. 나는 이것을 밖으로 시험 할 것이다. 이것은 앵귤러 콘트롤러 안에 템플리트를 내장하는 방법에 대한 또 다른 질문을 해결합니다. –