我一直在将自定义指令升级到新的组件架构.我读过组件不支持观察者.它是否正确？如果是这样,您如何检测对象的更改？对于一个基本的例子,我有自定义组件myBox,它有一个带有游戏绑定的子组件游戏.如果游戏组件中有更改游戏,我如何在myBox中显示警告消息？我明白有rxJS方法是否有可能纯粹在棱角分明？我的JSFiddle
JavaScript的
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Tony Danza";
});
app.component("myBox", {
bindings: {},
controller: function($element) {
var myBox = this;
myBox.game = 'World Of warcraft';
//IF myBox.game changes, show alert message 'NAME CHANGE'
},
controllerAs: 'myBox',
templateUrl: "/template",
transclude: true
})
app.component("game", {
bindings: {game:'='},
controller: function($element) {
var game = this;
},
controllerAs: 'game',
templateUrl: "/template2"
})
HTML
<div ng-app="myApp" ng-controller="mainCtrl">
<script type="text/ng-template" id="/template">
<div style='width:40%;border:2px solid black;background-color:yellow'> …angularjs angularjs-directive angularjs-scope angularjs-components angularjs-1.5
我正在试验.component()Angular 1.5中的语法.
似乎最新的方式是在组件中对控制器进行内联编码,而不是在单独的文件中编码,并且我可以看到组件样板文件最小的优点.
问题是我将控制器编码为打字稿类,并希望继续这样做,因为这似乎与Angular2一致.
我最大的努力是这样的:
export let myComponent = {
template: ($element, $attrs) => {
return [
`<my-html>Bla</my-html>`
].join('')
},
controller: MyController
};
class MyController {
}
它有效,但它并不优雅.有没有更好的办法？
如何监听角度组件绑定更改并执行操作？
angular.module('myapp')
.component('myComponent', {
templateUrl: 'some.html',
controller: MyController,
controllerAs: 'myCtrl',
bindings: {
items: '<'
}
});
现在当items我想要使用此值执行其他操作时,我该
怎么办？
这可能听起来很新,但我一直在关注angularjs组件的本教程.
我是组件的新手,我如何注入常量Utils或authService像我这样的组件？
app.component('tlOverallHeader', {
bindings: {
data: '='
},
templateUrl: 'js/indexTimeline/components/tl_overallHeader/templates/tl_overallHeader.html',
controller: function() {
this.ms = 'tlOverallheader!'
}
})
谢谢!
我正在努力提高1.5角度组件的速度.我一直在关注Todd Motto的视频,以获得组件以及angular的文档 https://docs.angularjs.org/guide/component.
在这一点上,组件似乎取代了使用控制器的指令,但在我们的1.5代码中,我们仍然会使用指令进行dom操作.
$ element,$ attrs在组件控制器内的目的是什么？这些似乎可用于操纵.这是文档中关于plunker的链接.我知道他们没有使用$元素,但这是我正在阅读的例子.http://plnkr.co/edit/Ycjh1mb2IUuUAK4arUxe?p=preview
但在像这样的代码......
angular
.module('app', [])
.component('parentComponent', {
transclude: true,
template: `
<div ng-transclude></div>
`,
controller: function () {
this.foo = function () {
return 'Foo from parent!';
};
this.statement = function() {
return "Little comes from this code";
}
}
})
.component('childComponent', {
require: {
parent: '^parentComponent'
},
controller: function () {
this.$onInit = function () {
this.state = this.parent.foo();
this.notice = this.parent.statement();
};
},
template: `
<div>
Component! {{ $ctrl.state }} …我试图从指令内部向其父控制器发送消息(没有成功)
这是我的HTML
<div ng-controller="Ctrl">
<my-elem/>
</div>
这是控制器中侦听事件的代码
$scope.on('go', function(){ .... }) ;
最后指令看起来像
angular.module('App').directive('myElem',
function () {
return {
restrict: 'E',
templateUrl: '/views/my-elem.html',
link: function ($scope, $element, $attrs) {
$element.on('click', function() {
console.log("We're in") ;
$scope.$emit('go', { nr: 10 }) ;
}
}
}
}) ;
我尝试过不同的范围配置和$ broadcast而不是$ emit.我看到事件被触发,但控制器没有收到'go'事件.有什么建议 ？
我正在尝试从仪表板组件访问我的家庭控制器范围,但它未定义.
我也尝试了第二种方法,但后来我的函数变量未定义.
我正在使用带有Typescript的Angular 1.5
第一种方法:
家庭控制器HTML:
<div class="home-container">
<dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged">
</dashboard-component>
</div>
家庭控制器js:
namespace app.dashboard {
'use strict';
class HomeController {
static $inject:Array<string> = ['$window'];
constructor(private $window:ng.IWindowService) {
}
private onTileTypeChanged(tile:ITile) {
console.log(tile); // DEFINED AND WORKING
console.log(this); // NOT DEFINED
}
}
angular
.module('app.dashboard')
.controller('HomeController', HomeController);
}
仪表板控制器js:
angular.module('app.dashboard')
.component('dashboardComponent', {
templateUrl: 'app/dashboard/directives/dashboard-container.html',
controller: DashboardComponent,
controllerAs: 'DashboardCtrl',
bindings: {
onTileTypeChanged: "&"
}
});
this.onTileTypeChanged()(tile);
第二种方法:
家庭控制器HTML:
<div class="home-container">
<dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged()">
</dashboard-component>
</div>
仪表板控制器js:
this.onTileTypeChanged(tile);
在这里,我正好相反:
private …我想知道在Angular 1.5中,当你使用组件时,有一种简单的方法来绑定一个属性,它是一个布尔值而不用@转换为字符串.
例如,我有两个组件"app-menu"和"app-menuitem"没有转换."app-menu"只有一个属性,是要创建"app-menuitem"的项目列表.
<app-menu items="menuitems">
在作为json的menuitems中,你有一个名为"isactive"的menuitem属性,它是一个布尔值.
$scope.menuitems = [{ label : 'menuitem 1', isactive : true},{ label : 'menuitem 1', isactive : false}]
在menuitem组件中:
angular.module('app')
.component('appMenuitem', {
transclude: false,
controller: menuitemController,
bindings: {
label: '@',
isactive: '@' //<--- The problem is here because the boolean is converted as string
},
templateUrl: 'angular/components/simple/menuitem/menuitem.html'
});
我不知道最好的方法是确保最终是一个真正的布尔值,而不是一个字符串,这让我有些错误.有人有想法吗？
binding components angularjs angularjs-directive angularjs-components
我一直在尝试component在项目中使用新的Angular 1.5 语法,但我无法弄清楚如何将依赖项注入组件定义.
这是我尝试将现有指令重构为组件:
angular
.module('app.myModule')
.component('row', {
bindings: {
details: '@',
zip: '@'
},
controller: 'RowController',
templateUrl: basePath + 'modules/row.html' // basePath needs to be injected
})
由于各种原因,我们将常量basePath作为templateUrl的一部分注入到我们的所有指令中.
如何在组件上执行此操作,因为组件定义不是函数？
我面临着将控制器转换为为Angular 2准备应用程序的组件的问题,但是迁移不顺利的问题,我有ui路由器在状态之间路由并在几个控制器中使用resolve,带控制器的版本正在工作,但组件的版本现在正在工作,我遵循了很多指南,似乎我对代码做得很好,但它不适合我.
我有以下模块与控制器:
(function () {
'use strict';
angular
.module('app.sample', [])
.config(config);
/** @ngInject */
$stateProvider
.state('app.sample', {
url : '/sample',
views : {
'content@app': {
templateUrl: 'app/main/sample/sample.html',
controller : 'SampleController as vm'
}
},
resolve: {
SampleData: function (myService) {
return myService.getSample(); // I return a promise here
}
}
});
}
})();
控制器:
(function ()
{
'use strict';
angular
.module('app.sample')
.controller('SampleController', SampleController);
/** @ngInject */
function SampleController(SampleData)
{
var vm = this;
vm.helloText …angularjs angular-ui-router angularjs-components angularjs-1.5