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

使用自定义指令

1 个答案: