Özel Angular yönergesini React

içinden kullanın. Açısal yineleme yinelemenin "hızlı tekrar" desenini React rendering ile uygulamaya çalışıyorum. Temel bir tablo oluşturabilirim, ancak tablonun özel Angular direktiflerini desteklemesi gerekecek. Özel direktifleri React olarak (nitelik olarak) gösterebilirim, ancak çalışmıyorlar. Sayın Google'a dayanarak bu mümkün olmalı, ancak bana göre, özel yönergelerimi içeren ... veya yapmayan Reaktive HTML'ye bir derleme yapmam gerekiyor.Özel Angular yönergesini React

Sıyrılmış test kodum İşte. 'Tepki testi' yönergesi, kendisi bir Açısal özel yönerge olan bir 'ng-maymun' özniteliği içeren ReactClass bileşenlerini doğru bir şekilde oluşturuyor gibi görünüyor. Maymun çalışmıyor gibi görünüyor. Baska öneri?

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

Bu render sonuçları: Ben eski konu olduğunu biliyorum

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

kaynak

2015-07-16 programmerj

Hiç bir çözüm buldunuz yardım edebilir misin? Ben de aynı problemle karşı karşıyayım. – jalbasri

Maalesef hayır. Kısa bir süre sonra performans problemimizin ng-repeat değil, IE ve Angular Material Design kütüphanesi ile ilgili sorunlar olduğunu keşfettik. Bu yüzden Angular Material Design'ı düşürdük. Üzgünüm, umarım bir çözüm bulursun. – programmerj

, ama bu çözüm birisi

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> 
        ); 
       } 
      });

kaynak

2016-09-29 14:14:41 Bartosz

Özel Angular yönergesini React

cevap

İlgili konular