Question

如果我编译本机html元素，它可以正常工作。

但是如果我在控制台中编译编译Angular Material元素（md-button）＆＃34;错误：[ngTransclude：orphan]＆＃34;。

我累了，无法弄明白。我需要从模板中获取html代码，我知道当我们从字符串值创建元素并编译它时，它工作正常。也许它必须使用$ mdCompiler，但我不知道如何。

这是一个简单的例子，请帮助我。

＆＃13;

<!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>
  
  <script type="text/javascript">
	console.log("\n\n\n\n\n");
	console.clear();
	
    var app = angular.module('BlankApp', ['ngMaterial']);
	
	app.controller("myCtrl", function($scope) {  } );
	
	app.directive('mydir', ['$compile', function($compile){
		return {
			scope: {
			},
			template: 
				"<md-button>md Button</md-button>" + 
				"<button>Native Button</button>" + 
				"<span> HelpMePlease </span>", 
			restrict: "E",
			link: function(scope, element, attrs) {
				scope.fn = function () { console.log("Hello"); };

				var mdButton = element.find("button").eq(0);
				mdButton.attr("ng-click", "fn()");
				$compile(mdButton)(scope);
				console.log(mdButton[0]);

				var button = element.find("button").eq(1);
				button.attr("ng-click", "fn()");
				$compile(button)(scope);
				console.log(button[0]);
			}
		};
	} ] );
	
  </script>
  
</body>
</html>

＆＃13;

Answer 1

这是因为md-button已编译。

也许，你可以使用它。

jsfiddle上的示例。

＆＃13;

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

＆＃13;

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

＆＃13;

如何更改角度材质指令并进行编译

1 个答案: