Wie Winkel-Material-Direktive ändern und kompilieren

Wenn ich native HTML-Element kompilieren, funktioniert es gut.Wie Winkel-Material-Direktive ändern und kompilieren

Aber wenn ich compile Angular Material Element (MD-Schaltfläche) in der Konsole kompiliert zeigt, zeigt "Fehler: [ngTransclude: verwaist]".

Ich bin total müde und kann es nicht herausfinden. Ich brauche HTML-Code aus der Vorlage, ich weiß, wenn wir Element aus String-Wert erstellen und kompilieren, funktioniert es gut. Vielleicht muss es $ mdCompiler sein, aber ich weiß nicht wie.

Hier ist ein kleines und einfaches Beispiel, bitte helfen Sie mir.

<!doctype html> 
 
<html lang="en" > 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
</head> 
 
<body ng-app="BlankApp" ng-cloak> 
 
\t <div ng-controller="myCtrl"> 
 
\t \t <mydir></mydir> 
 
\t </div> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-messages.min.js"></script> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script> 
 
    
 
    <script type="text/javascript"> 
 
\t console.log("\n\n\n\n\n"); 
 
\t console.clear(); 
 
\t 
 
    var app = angular.module('BlankApp', ['ngMaterial']); 
 
\t 
 
\t app.controller("myCtrl", function($scope) { }); 
 
\t 
 
\t app.directive('mydir', ['$compile', function($compile){ 
 
\t \t return { 
 
\t \t \t scope: { 
 
\t \t \t }, 
 
\t \t \t template: 
 
\t \t \t \t "<md-button>md Button</md-button>" + 
 
\t \t \t \t "<button>Native Button</button>" + 
 
\t \t \t \t "<span> HelpMePlease </span>", 
 
\t \t \t restrict: "E", 
 
\t \t \t link: function(scope, element, attrs) { 
 
\t \t \t \t scope.fn = function() { console.log("Hello"); }; 
 

 
\t \t \t \t var mdButton = element.find("button").eq(0); 
 
\t \t \t \t mdButton.attr("ng-click", "fn()"); 
 
\t \t \t \t $compile(mdButton)(scope); 
 
\t \t \t \t console.log(mdButton[0]); 
 

 
\t \t \t \t var button = element.find("button").eq(1); 
 
\t \t \t \t button.attr("ng-click", "fn()"); 
 
\t \t \t \t $compile(button)(scope); 
 
\t \t \t \t console.log(button[0]); 
 
\t \t \t } 
 
\t \t }; 
 
\t } ]); 
 
\t 
 
    </script> 
 
    
 
</body> 
 
</html>

Quelle

2017-02-24 Markiyan Dutsyak

Dies liegt daran, md-button bereits zusammengestellt.

Vielleicht können Sie dies verwenden.

Beispiel auf jsfiddle.

var app = angular.module('BlankApp', ['ngMaterial']); 
 

 
app.controller("myCtrl", function($scope) {}); 
 

 
app.directive('mydir', ['$compile', '$mdCompiler', function($compile, $mdCompiler) { 
 
    return { 
 
    scope: {}, 
 
    template:"<button>Native Button</button>" + 
 
     "<span> HelpMePlease </span>", 
 
    restrict: "E", 
 
    link: function(scope, element, attrs) { 
 
     scope.fn = function() { 
 
     console.log("Hello"); 
 
     }; 
 

 
     $mdCompiler.compile({ 
 
     template: '<md-button ng-click ="fn()" >md Button</md-button>' 
 
     }).then(function(compileData) { 
 
     compileData.link(scope); 
 
     element.prepend(compileData.element); 
 
     }); 
 

 
     var button = element.find("button").eq(0); 
 
     button.attr("ng-click", "fn()"); 
 
     $compile(button)(scope); 
 
    } 
 
    }; 
 
}]);

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
</head> 
 

 
<body ng-app="BlankApp" ng-cloak> 
 
    <div ng-controller="myCtrl"> 
 
    <mydir></mydir> 
 
    </div> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-messages.min.js"></script> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script> 
 

 
</body> 
 

 
</html>

Quelle

2017-02-24 17:18:40

Wie Winkel-Material-Direktive ändern und kompilieren

Antwort

Verwandte Themen