我之前已经构建了一个AngularJS项目并且熟悉语法.这次我ng-controller="UniversalCtrl as universal"不能工作,我已经尝试了一切.如果我采取universal.showHeader == true并改变它是showHeader == true有效的,但我需要它作为变量universal.就像我说的,我有其他项目遵循相同的结构,他们工作正常.
这是我的HTML代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="pragma" content="no-store" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link href="styles/MarkStrap.css" rel="stylesheet" />
<link href="styles/Site.css" rel="stylesheet" />
<script type="text/javascript" src="js/Angular/angular.min.js"></script>
<script type="text/javascript" src="js/Angular/angular-route.min.js"></script>
<script type="text/javascript" src="js/Universal/Universal.js"></script>
<script type="text/javascript" src="js/Universal/Filters.js"></script>
<script type="text/javascript" src="js/Universal/Directives.js"></script>
<title>WIN</title>
<link rel="shortcut icon" href="winIcon.ico">
</head>
<body ng-app="winApp" ng-controller="UniversalCtrl as …标记
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
我包括angular.min,angular-route甚至角度资源和动画......
解决了
因此,在查看您的回复并对我的代码进行细微更改之后,我发现了一个简单的拼写错误,这使我无法达到我追求的结果.所以,非常感谢大家帮忙解决了我的错误,我现在已将控制器分开,一切都按计划进行!
----
我目前正在Visual Studio 2015中使用Cordova,Ionic和AngularJS开发混合移动应用程序.由于我的单个controller.js文件中包含大量代码,我想分离代码,因此我有一个.js控制器文件每个模板; 而不是一个文件中的所有内容.不幸的是,我不明白如何解决这个问题(仍然学习AngularJS).我已经完成了一些研究但是我见过的大多数例子都显示了一个非常简单的演示,我用我自己的代码复制但是它仍然不起作用.所以我希望有人能给我一个洞察我可能出错的地方.
/ www中的文件结构
- 的index.html
/ JS
app.js
controllers.js
/ JS /控制器
login.js
sales.js
/模板
的login.html
sales.html
/ js/app .js
angular.module('main', ['ionic', 'main.controllers', 'chart.js', 'ngCordova', 'ngIOS9UIWebViewPatch', 'angular.filter'])
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('login', {
cache: false,
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
})
.state('sales', {
cache: false,
url: "/sales",
templateUrl: "templates/sales.html",
controller: "SalesCtrl"
})
$urlRouterProvider.otherwise('/login')
$ionicConfigProvider.views.swipeBackEnabled(false);
});
/js/controllers.js
angular.module('main.controllers', ['ionic', 'ngCordova']);
/js/controllers/login.js
angular.module('main.controllers', [])
.controller("LoginCtrl", function ($scope, $state, $cordovaSQLite, $timeout, $ionicPopup, $cordovaDevice, $ionicLoading, $cordovaKeyboard, …javascript angularjs angularjs-controller angularjs-module ionic-framework
我是AngularJS的相对入门者，正在编写一个具有各种可重用组件的应用程序（例如，同一张表可能在屏幕上出现5次，但列数略有不同-如有必要，我可以详细介绍）。其他人也会想编写使用这些组件的代码。同样，多个组件将要从相同的来源中提取数据，并且多个人将要进行相同的REST调用以获取数据。
我想到的一般架构：
举一个简单的例子，一条指令将使用ng-repeat打印一个名称列表。服务将具有一个“公共”函数getNames（），该函数返回名称列表。我正在编写一个应用程序-我使用“ canned”指令和服务，我编写了一个将服务作为依赖项的控制器，调用getNames（）函数并将结果返回到指令。我的HTML页面像其他任何HTML元素一样简单地使用指令。
我的主要问题-将数据放入指令的最佳方法是什么？我知道就范围而言，有很多选择，但是必须在我的控件中创建一个具有特定名称的变量并“神奇地”工作似乎是错误的。
从广义上讲，这是否合理？我基本上将指令和服务视为开发人员将使用的公共API。
我试图用绑定变量调用控制器中定义的方法.
<img src="close.png" style="widht: 34px; height: 23px; cursor: pointer;"
data-ng-click="hideDtls({{one}} , {{two}})">
这里有一个和两个在我的控制器中定义,我可以在浏览器的开发工具中看到变量正在获取它们的值但是方法没有被调用.我必须将参数作为参数发送到方法.(我知道我可以直接访问它们,但这是由于实现).
$scope.hideDtls(one , two)
{
// more logic here
}
请告诉我,angularJs中不允许使用绑定变量调用方法吗？提前致谢
我正在创建两个使用相同控制器的指令,因此我看到两个指令在控制器之间共享数据.我想要的是每个指令的数据都是UNIQUE,因此不应该共享数据.
var app = angular.module("app",[]);
app.controller('myCtrl', function($scope){
$scope.data = {
name: 'Javier'
};
});
app.directive('dir1', function(){
return {
template: "<div style='background:red'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
app.directive('dir2', function(){
return {
template: "<div style='background:yellow'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
https://jsbin.com/vetikuvada/1/edit?html,js,output
因此,在我的示例中,我想要的是当我在其中一个文本框中编辑文本时,它不会触发其他文本框中的更改.我知道控制器部署了不同的实例,但不知怎的,它们共享范围,我需要完全不同.这可能吗？
该示例是一个非常复杂的应用程序的一小部分,所以我必须能够使用这种方法而不是其他方法.
javascript angularjs angularjs-directive angularjs-scope angularjs-controller
我试图模块化我的代码并将控制器移动到使用相同模块的单独文件中.但是,它没有加载,我确保加载顺序是正确的.
// app.js
angular.module("app", []);
// LoginCtrl.js
angular.module("app", []).controller("LoginCtrl", function()
{
//doSomeThing
});
如果我在第一个文件中执行var app = angular.module并在其他文件中使用相同的变量,它就可以工作.
// app.js
var app = angular.module("app", []);
// LoginCtrl.js
app.controller("LoginCtrl", function()
{
//doSomeThing
});
如果我将所有代码移动到一个文件中并分别对每个组件使用angular.module,它就可以工作.
// app.js
angular.module("app", []);
angular.module("app", []).controller("LoginCtrl", function()
{
//doSomeThing
});
我错过了什么吗？
javascript module controllers angularjs angularjs-controller
在创建仪表板应用程序时,我遇到了需要将AngularJS控制器和服务集于一身的情况.
在主(第一)页面我有mainController(没有布局),也layoutController用方法loadLayoutFromAPI()和键绑定到按钮saveLayoutToAPI().
现在,在中学(第二)secondController只有而不是layoutController.我需要layoutController直接使用来自的方法secondController,我不想ng-controller在HTML中插入指令(而是secondController通过像服务一样的依赖注入).
MainPage(1st):
<div ng-controller="mainController">
<!-- some other code -->
<div ng-controller="layoutController as ctrl">
<a href="#" ng-click="ctrl.loadLayoutFromAPI()">Load</a>
<a href="#" ng-click="ctrl.saveLayoutToAPI()">Save</a>
</div>
</div>
第二页(第二页):
<div ng-controller="secondController">
<!-- some other code -->
</div>
我试图寻找这个问题,但根本找不到答案.
问题:我应该如何使用相同的代码(方法save()和load())作为Controller(ng-controller)和其他时间作为服务(包括在内dependency-injection)？
谢谢
JS Bin按要求
我有这样的指示
app.directive('clipChat', ClipChat);
function ClipChat() {
var strfin ='*';
var chatTemplate = '<div ng-repeat="message in newarr"> <span ng-if="message.content.slice(-1)==message.star" ng-click="makeitTodo(message)">i <i class="fa fa-mail-forward "></i></span> '+ '</div>' ;
var directive = {
restrict: 'EA',
template: chatTemplate,
replace: true,
scope: {
messages: "=",
idSelf: "=",
idOther: "=",
},
link:function ($scope) {
//等等
当我单击控制器内的span元素时,我想调用函数makeitTodo ..
我测试过如下.
app.controller('ChatCtrl', ["$scope",function($scope){
$scope.makeitTodo = function(a){
alert(a);
}
}])
但它不起作用.请帮助我.
javascript angularjs angularjs-directive angularjs-controller