标签: angularjs-components

我正在开发一个模块化的 angular 应用程序，我在 angular-module-1 模块中定义了 I 文件夹路径（常量：BASE_PATH：“path/to/folder”）。我想在位于我的应用程序的另一个模块 (angular-module-2) 中的角度组件中重新使用这个常量。我想在我的项目中多次使用这个常量。

module.component("relationshipSearch", {
templateUrl: BASE_PATH +'/link/to/other/folder',

巫婆是将此常量定义为所有解决方案项目中可见的全局变量的最佳方法这是我的项目结构：

project
|-- angular-module-1
|   |-- angular-module-1.js
|   |-- angular-module-1.html
|-- angular-module-2
|   |-- angular-module-2.js
|   |-- angular-module-2.html

我正在尝试使用AngularJs 1.5组件,但每次我声明bindings我一直收到此错误:

与'homeComp'一起使用的属性'message'中的表达式'undefined'是不可赋值的!

我正在尝试一个简单的组件,只是为了学习它,这是代码:

var component = {
  bindings: {
      message: '='
  },
  controllerAs: 'vm',
  controller: function MainController() {
    this.message = 'Welcome to my component';

    function debug() {
      this.message = 'This message changed';
    }
    this.debug = debug;
  },
  template: [
    'Message: {{ vm.message }}<br />',
    '<button ng-click="vm.debug()">Change message</button>'
  ].join(``)
};

你可以在这里看到错误:http://plnkr.co/edit/uutk5kxOVpa5eLfjoa8U？p = preview

代码有什么问题？或者是什么导致了这个错误？如果我删除绑定,则不会出现错误,我可以更改消息.

传递给child指令的ng-model上的角度ng-change

基本上,我希望能够将ng-model从父指令传递给子指令.我可以只使用双向绑定值,但是后来我无法在子元素的父指令中使用ng-change.我也可以使用ng-click,但这不适用于非单击更改(例如文本区域而不是复选框).所以我想知道是否有一种方法允许自定义指令具有类似于输入,按钮,文本区域和其他html元素的ng-model/ng-change对.我想避免使用emits,ons,watch,传递回调等.我只是希望能够在自定义指令而不是输入上执行[input type ="checkbox"ng-model ="ngModel"].

父模板

<child ng-model="x" ng-change="x()"></toggle>

家长指令

$scope.x = function() {console.log('hi')};

儿童模板

<div>
     <input type="checkbox" ng-model="ngModel">
</div>

儿童指令？

$scope.ngModel = $element.controller('ngModel'); 

我的角度版本是1.4.8 btw.

谢谢 :)

按模型更新但不更新模型。我应该使用 $onChanges 函数吗

我有一个模型：

class Model {
  constructor(data) {
    this.data = data;
  }
  getData() {
    return this;
  }
}

2个嵌套组件：

var parentComponent = {
  bindings: {
    vm: '<'
  },
  controller: function() {
    var ctrl = this;
  },
  template: `
    <div>
      <a ui-sref="hello.about" ui-sref-active="active">sub-view</a>
      Parent component<input ng-model="$ctrl.vm.data">
      <ui-view></ui-view>
    </div>
  `
};

class Model {
  constructor(data) {
    this.data = data;
  }
  getData() {
    return this;
  }
}

两者都从解析中获取数据：

.config(function($stateProvider) {
    var helloState = {
      name: 'hello',
      url: '/hello',
      resolve: { …