Verwenden Sie benutzerdefinierte Winkeldirektive aus React

Ich versuche, das "schnelle Wiederholung" -Muster des Ersetzens Angular ng-Wiederholung mit einem React-Rendering zu implementieren. Ich kann eine Basistabelle rendern, aber die Tabelle muss benutzerdefinierte Angular-Anweisungen unterstützen. Ich kann die benutzerdefinierten Anweisungen in React (als Attribute) rendern, aber sie funktionieren nicht. Basierend auf Mr. Google sollte dies möglich sein, aber es scheint mir, dass ich vielleicht eine $ kompilieren muss für den realisierten HTML-Code, der meine benutzerdefinierten Direktiven enthält ... oder nicht.Verwenden Sie benutzerdefinierte Winkeldirektive aus React

Hier ist mein abgespeckter Testcode. Die "React-Test" -Richtlinie scheint die ReactClass-Komponenten korrekt darzustellen, die ein "ng-monkey" -Attribut enthalten, das selbst eine Angular-Custom-Direktive ist. Der Affe scheint nicht zu funktionieren. Irgendwelche Vorschläge?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Angular React Test</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta content="width=device-width, initial-scale=1.0" name="viewport" /> 
</head> 
<body ng-app="AngularReactTest" ng-controller="TestController"> 

    <react-test monkey></react-test> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"> </script> 
    <script src="https://fb.me/react-0.13.3.js"></script> 

    <script> 
     var ReactClass = React.createClass({ 
      displayName: 'ReactClass', 
      render: function() { 
       return (
        React.DOM.div({ 'data-ng-monkey': '' }, null) 
       ) 
      } 
     }); 

     angular 
      .module('AngularReactTest', []) 
      .controller('TestController', [function() { 
      }]) 
      .directive('reactTest', function() { 
       return { 
        restrict: 'E',     
        link: function (scope, el, attrs) { 
         var test = React.createElement(ReactClass, null, null); 
         React.render(test, el[0], null); 
        } 
       } 
      }) 
      .directive('ngMonkey', function() { 
       return { 
        restrict: 'A', 
        link: function (scope, el, attrs) { 
         alert('In ngMonkey link function...making my head hurt...'); 
        }, 
       } 
      }); 
    </script> 
</body> 
</html>

Dies ist die Rendering-Ergebnisse:

<ReactTest> 
    <div data-ng-monkey></div> 
</ReactTest>

Quelle

2015-07-16 programmerj

haben Sie jemals eine Lösung helfen kann? Ich stehe vor dem gleichen Problem. – jalbasri

Leider nicht. Wir fanden bald heraus, dass unser Leistungsproblem nicht die Art von ng-repeat war, sondern Probleme mit der IE- und Angular Material Design-Bibliothek. Also haben wir das Angular Material Design weggelassen. Entschuldigung, ich hoffe du findest eine Lösung. – programmerj

Ich weiß, es altes Thema ist, aber ich denke, diese Lösung jemand

React.createClass({ 
       compileDirective: function() { 
        $compile(this.refs.monkey)($scope); 
       }, 
       componentDidMount: function() { 
        this.compileDirective(); 
       }, 
       componentDidUpdate: function() { 
        this.compileDirective(); 
       }, 
       render: function() { 
        return (
         <div> 
          <monkey ref="monkey"></monkey> 
         </div> 
        ); 
       } 
      });

Quelle

2016-09-29 14:14:41 Bartosz

Verwenden Sie benutzerdefinierte Winkeldirektive aus React

Antwort

Verwandte Themen