使用自定义指令的非常简单的 AngularJS 小部件

Question

我现在正在努力学习 AngularJS，这是一个有点坎坷的过程。今天我开始尝试使用 AngularJS 制作一个非常简单的测试小部件，但我似乎无法让它工作。我很确定这是一个快速修复，但我没有足够的经验来识别我做错了什么。非常感谢有关此特定小部件或一般 AngularJS 指针的任何帮助。

谢谢！

简单指令文件：

//simpleDirective.js
var messagesApp = angular.module("messagesApp", []);



messagesApp.directive('message', function(){
    var directive = {};

    directive.restrict = 'E';

    directive.template = "{{successMessage}}";

    directive.scope = false;

    return directive;

});

简单示例页面文件：

<html ng-app="messagesApp">

<body ng-controller="simpleController">


<message>This text should be replaced.</message>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script src="simpleDirective.js"><script>

<script> 
var testApp = angular.module("testApp", []);
function SimpleController($scope){

    if(1 == 1)
    $scope.successMessage = "Item saved successfully";

    else
        $scope.successMessage = "NONE";
}


testApp.controller('simpleController', SimpleController);
</script>


</body>
<html>

Answer 1

这里有几个问题：

1) 您的控制器在与您在 html 中指向的 ng-app 模块不同的模块中定义。更正它以指向正确的模块。

<html ng-app="testApp">

2) 您需要将您的指令模块注入到您的控制器模块中，以便它可用。

var testApp = angular.module("testApp", ["messagesApp"]);

完整解决方案请参考这个插件：http://plnkr.co/edit/zld5lG4mLK3sSP2P0DX0?p=preview

使用自定义指令的非常简单的 AngularJS 小部件

Very simple AngularJS widget using custom Directive

html

widget

angularjs