AngularJS，自定义指令不起作用@ plnkr

AngularJS , custom directive not working @ plnkr

本文关键字：plnkr 不起作用 指令 自定义 AngularJS      更新时间：2023-09-26

我创建了一个简单的 plnk @ plnkr.co。它在那里不起作用。但是，相同的代码在本地运行流畅。

PLNK @ plnkr.co 链接

索引.html 

<!DOCTYPE html>
<html ng-app='app'>
  <head>
    <script data-require="angular.js@*" data-semver="1.2.6" src="https://code.angularjs.org/1.2.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller='controller'>
    <h1>Hello Plunker!</h1>
    <div my-sample></div>
  </body>
</html>

脚本.js

// Code goes here
'use strict';
var app = angular.module('app',[]).
controller('controller',function($scope)
{
  
}).directive('mySample',function($compile)
{
  return {
    link : function(scope,element,attrs,controller)
    {
      var markup = "<input type='text' ng-model='text' />{{text}}"
      angular.element(element).html($compile(markup)(scope));
    }
  }
});

plnkr 中的输出如下所示：

你好普伦克！

[

[object HTMLInputElement]， [object HTMLSpanElement]]

奇怪，但是当我在本地 HTML 中运行相同的内容时，它呈现得很好。这是怎么回事？？

我也在使用角度 js 1.2.6 它，因为这是我的工作中使用的 - 生产应用程序......所以我现在正在使用 1.2.6 学习 Angular。

你只需要稍微不同地编译它。

element.html("<input type='text' ng-model='text' />{{text}}");
$compile(element.contents())(scope);

普伦克

只是简短的一句话：我假设您在这里所做的是简化的，并且在您的真实情况下需要编译您的模板，因为目前没有。

相关文章：