Javascript 从另一个模块访问作用域的指令
所以，我对AngularJS是相当陌生的，我可能没有正确地处理这个问题，特别是在我使用指令的方式上 我有一个主应用程序，我想在其中放置一些常用代码，比如在html页面上显示一些消息的指令。我有一个控制器，它进行RESTAPI调用以验证凭据，然后将一些数据分配给$scope。我希望指令使用该范围数据以html格式显示消息并进行一些格式化。根据我的研究，在控制器上执行此操作不是最佳实践。我知道我可以直接在控制器中执行此操作，只需在html中添加一个div，如：Javascript 从另一个模块访问作用域的指令,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,所以，我对AngularJS是相当陌生的，我可能没有正确地处理这个问题，特别是在我使用指令的方式上 我有一个主应用程序，我想在其中放置一些常用代码，比如在html页面上显示一些消息的指令。我有一个控制器，它进行RESTAPI调用以验证凭据，然后将一些数据分配给$scope。我希望指令使用该范围数据以html格式显示消息并进行一些格式化。根据我的研究，在控制器上执行此操作不是最佳实践。我知道我可以直接在控制器中执行此操作，只需在html中添加一个div，如： <div>{{valida
<div>{{validation.message}}</div>
angular.module("myApp").directive("simplevalidation", function () {
//add these attributes to the directive element
//data-validate="verifyAccount(newAccount)" data-validationmessage="validation.message" data-validationsuccess="validation.success"
return {
scope: {
validate: '&',
validationmessage: '=',
validationsuccess: '='
},
template: '<button type="button" data-ng-click=validate()>Verify</button><span></span>',
link: function ($scope, element, attrs) {
$scope.$watchGroup(["validationmessage", "validationsuccess"], function () {
if ($scope.validationsuccess != null) {
if ($scope.validationsuccess) {
element.children("span").html($scope.validationmessage + " " + " ✅");
element.children("span").css("color", "green");
}
else {
element.children("span").html($scope.validationmessage + " " + " ✖");
element.children("span").css("color", "red");
}
}
}, true);
}
};
});
angular.module（“myApp”）.指令（“simplevalidation”，函数（）{
//将这些属性添加到指令元素
//data validate=“verifyAccount（newAccount）”数据验证message=“validation.message”数据验证成功=“validation.success”
返回{
范围：{
验证：“&”，
validationmessage:“=”，
验证成功：'='
},
模板：“验证”，
链接：函数（$scope，element，attrs）{
$scope.$watchGroup（[“validationmessage”，“validationsuccess”]，函数（）{
如果（$scope.validationsuccess！=null）{
if（$scope.validationsuccess）{
element.children（“span”）.html（$scope.validationmessage++“✅；”）；
元素。子元素（“span”）.css（“颜色”、“绿色”）；
}
否则{
element.children（“span”）.html（$scope.validationmessage++“✖；”）；
元素。子元素（“span”）.css（“颜色”、“红色”）；
}
}
}，对）；
}
};
});
angular.module("myApp").directive("myappmessage", function () {
//✅ : ✖
return {
scope: {
message: '='
},
link: function postLink(scope, element, attrs) {
scope.$watch('message', function(value) {
element.html('<span>' + value + '</span>');
});
}
};
});
angular.module（“myApp”）指令（“myappmessage”，函数（）{
//✅ : ✖
返回{
范围：{
消息：'='
},
链接：函数postLink（作用域、元素、属性）{
范围$watch（'消息'），功能（值）{
html（“”+value+“”）；
});
}
};
});
<div data-myappmessage message="validation.messages"></div>
您在这里误解了一些概念，我认为这会使您试图做的事情过于复杂 1。模块： 模块只是使用依赖项组织代码的一种方式。加载后，哪个模块承载哪个服务/控制器/指令并不重要 2。应用程序和ng应用程序： 每个页面都应该有一个应用程序。您可以有多个，但需要手动
angular.bootstrapStoredAccountsModulemyApp<html ng-app="myApp" >
<body>
<div data-ng-view data-ng-controller="MainController">
<div data-ng-app="StoredAccountsModule">
...
</div>
</div>
</body>
</html>
<div ng-controller="ParentCtrl">
<div ng-show="VM.isBusy">loading...</div>
<div ng-controller="ChildCtrl">
<button ng-click="loadSomething()">load</button>
</div>
</div>
加载。。。
负载
（顺便说一句，这些控制器可能很容易来自不同的模块）这与您在指令中定义的范围有关。默认情况下；如果我没有弄错的话，这是一个带有原型继承的新范围，但是您需要一个与$parent控制器的双向绑定。下面的链接会让你对你有一个很好的了解，它是有效的：当你可以简单地使用一个带表达式的指令模板时，为什么要手动查看“消息”呢？是的，在这种情况下你是正确的，你不需要这样做，代码可以通过根本没有链接函数来简化，而只需定义一个模板。更一般地说，您可能需要观看一些复杂的dom处理作为响应。接下来，创建一个“根”模块（如我所见）的目的是什么？推荐了许多地方，并将子模块作为依赖项添加到该根应用程序中？按照你所说的，我应该有一个带有多个控制器的模块，或者仍然有多个模块（就像我定义的MVC控制器一样），但每页只加载一个应用程序？如果我每页只加载1个应用程序，我将如何使用通用代码？我真正想要的是使用该指令操作html，比如在div中发布html字符。应用程序是根模块（我想这就是你的意思），将特定于应用程序的依赖项（如配置、常量）放在那里是有意义的。子模块都是关于跨应用程序（如果需要）或跨同一应用程序的依赖项的可重用性。无论如何，拥有多个相同页面应用程序的情况是有限的。另外，有人说Angular将支持每种类型的延迟加载module@hakenmt，这解决了你的问题吗？对于最初的问题，它确实解决了，帮助我解决了范围、指令和控制器之间的关系。谢谢但是对于我发布的更新，我仍然有一个问题。@hakenmt，编辑是为了澄清/改进原始问题，而不是继续添加更多的问题。因此，当每个问题都包含得很好且简洁时，它最有效。因此，如果我的回答解决了你原来的问题，把标记看作是接受的，并为任何新的问题创造一个新的问题。我还建议从问题中删除“更新”部分。
angular.module("myApp").controller("MainController", ['$scope', '$timeout', "StoredAccountsFactory", function ($scope, $timeout, StoredAccountsFactory) {
$scope.validation = {}
$scope.verifyAccount = function (account) {
$scope.validation = {};
StoredAccountsFactory.validateStoredAccount(account).success(function (data, status, headers, config) {
$scope.validation.message = "Account credentials verified";
$scope.validation.success = true;
$scope.validation.symbol = "✅"
}).error(function (data, status, headers, config) {
$scope.validation.message = data;
$scope.validation.success = false;
$scope.validation.symbol = "✖"
});
}
}]);
angular.module("myApp").directive("simplevalidation", function () {
//add these attributes to the directive element
//data-validate="verifyAccount(newAccount)" data-validationmessage="validation.message" data-validationsuccess="validation.success"
return {
scope: {
validate: '&',
validationmessage: '=',
validationsuccess: '='
},
template: '<button type="button" data-ng-click=validate()>Verify</button><span></span>',
link: function ($scope, element, attrs) {
$scope.$watchGroup(["validationmessage", "validationsuccess"], function () {
if ($scope.validationsuccess != null) {
if ($scope.validationsuccess) {
element.children("span").html($scope.validationmessage + " " + " ✅");
element.children("span").css("color", "green");
}
else {
element.children("span").html($scope.validationmessage + " " + " ✖");
element.children("span").css("color", "red");
}
}
}, true);
}
};
});
angular.module("myApp").directive("myappmessage", function () {
//✅ : ✖
return {
scope: {
message: '='
},
link: function postLink(scope, element, attrs) {
scope.$watch('message', function(value) {
element.html('<span>' + value + '</span>');
});
}
};
});
<div data-myappmessage message="validation.messages"></div>
<html ng-app="myApp" >
<body>
<div data-ng-view data-ng-controller="MainController">
<div data-ng-app="StoredAccountsModule">
...
</div>
</div>
</body>
</html>
app.controller("ParentCtrl", function($scope){
var VM = $scope.VM = ($scope.VM || {});
VM.isBusy = false;
})
.controller("ChildCtrl", function($scope, $http){
var VM = $scope.VM = ($scope.VM || {});
$scope.loadSomething = function(){
VM.isBusy = true;
$http.get("something").then(function(d){
VM.isBusy = false;
});
}
});
<div ng-controller="ParentCtrl">
<div ng-show="VM.isBusy">loading...</div>
<div ng-controller="ChildCtrl">
<button ng-click="loadSomething()">load</button>
</div>
</div>