标签: angular-directive

我有一个自定义指令myDirective,在一个元素上执行任务.

我在一个ng-if区块中有这个指令

<div ng-if="condition">
    <div my-directive></div>
</div>

像这个小提琴:http://jsfiddle.net/hGnvv/只有ng-if在我的$http请求加载后条件变为true .

该指令可能在运行时编译,但从未链接,因此代码永远不会运行.如果我更换ng-if由ng-show该指令工作正常.

有解决方案吗

编辑:我无法使用,ng-show因为我在表单中有130个指令.无论如何都会运行20个指令,另一个根据我的对象类型运行.

• ng-if="type == 1" 然后加载这些元素
• ng-if="type == 2" 然后加载其他元素等

如果我更改ng-if为ng-show,表单需要加载8秒而不是1秒.

我写了一个指令,它有助于在ajax请求挂起时禁用按钮.

这是我的指示:

.directive('requestPending', ['$http', function ($http) {
            return {
                restrict: 'A',
                scope: {
                    'requestPending': '='
                },
                link: function (scope, el, attr) {
                    scope.$watch(function () {
                        return $http.pendingRequests.length;
                    }, function (requests) {
                        scope.requestPending = requests > 0;
                    })
                }
            }
        }])

HTML就像:

<button request-pending="pending" ng-disabled="pending">Save</button>

想知道这是否是一种正确的做法.我想不要使用$ watch

谢谢.

随着Angular 1.5中组件概念的引入,还引入了单向数据绑定(<).但是,手册说:

但请注意,父组件和组件范围都引用相同的对象,因此,如果要更改组件中的对象属性或数组元素,则父级仍将反映该更改.因此,一般规则应该是永远不要更改组件范围中的对象或数组属性.

事实上,在指令/组件范围中更改对象的属性会反映在父范围内 - 听起来不像是单向绑定,它只会增加整个事物的混乱 - 我们现在有半单向绑定,你最好不要用于对象或数组,而对于字符串我们有@.

什么是使用单向数据绑定的有用实际场景？或者完全避免它以保护自己免受意外变化是一个好主意 - 因为单向概念尖叫它是单向的,而事实并非如此？

有

• 控制器
• 常量
• 指令
• 服务
• 厂
• 跑
• 配置
• 过滤器

的功能angular.js.所有这些模块的调用顺序是什么？

这个插件的目的是将元素从控制器转换为Angular UI Modal,其中Modal由指令包装.解决方案应遵循以下前提:

• 该指令声明了字段的转换.这些字段包含在控制器HTML标记中的指令声明中.
• 在控制器中声明的这些字段应显示在模态中.
• 这些字段的范围应该可以在控制器中访问(请参阅我input1在控制器中声明了一个应该在Modal中设置值的变量).
• 我定义了一个content元素来转换字段.此元素位于模态的模板中.我不确定这个模板何时可以转录它.

总而言之,目标是在控制器HTML标记中声明一组字段并在模态中可用,其中模式包含在指令中,范围在控制器中管理.任何想法将不胜感激.

HTML

<div the-modal control="modalCtl">
    <p>some text</p>
    <input type="text" ng-model="input1" />
</div>

<button type="button" ng-click="open()">Open me!</button>

使用Javascript

var app = angular.module("app", ['ui.bootstrap']);

app.controller("ctl", function($scope,$timeout) {

  $scope.modalCtl = {};

  $scope.input1 = "abc";

  $scope.open = function(){
    $scope.modalCtl.openModal();
  };

});


app.directive("theModal", function($uibModal) {
  return {
    restrict: "AE",        
    scope: {              
      control: "="
    },
    transclude: true,
    link: function (scope, element, attrs, ctrl, transclude) {
      scope.control = scope.control || {}

      scope.control.openModal = function () …

我创建了一个拥有自己的自定义组件@input()，@output依此类推。该组件具有一个<input />字段，用户可以在其中输入一些值。

例如： <my-component ...></my-component>

我在我的html中引用了它，它可以完美地工作。我还创建了几个指令，这些指令可通过简单的正则表达式验证表单输入数据。我可以在格式如下的普通输入中使用它们：

<input type="text" validator1 validator2 validator3 />

有没有一种方法可以将这些指令中的一个或多个（但也没有一个）传递给我的自定义组件，而无需在组件源中对其进行硬编码？

某种...params评估？

预先感谢您的所有帮助

瓦列里奥

我正在使用Angular 6.

我通过扩展NbgPopover声明了一个指令StickyPopover并添加了*app.module.ts**declaration

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {StickyPopoverDirective} from './sticky-popover.directive';


@NgModule({
  declarations: [
    AppComponent,
    AuthLayoutComponent,
    AdminLayoutComponent,
    StickyPopoverDirective           // custom created directive
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, …

我使用以下方法创建了一个 Angular 库：

1. ng 新的 my-workspace --create-application=false
2. cd 我的工作区
3. ng 生成库 my-lib

图书馆工作了。但是，当我修改模板以使用 *ngFor 时，如下所示：

模板：

<div *ngFor="let item of items">
  my-lib works!
</div>

我收到错误：

属性 ngFor 上没有匹配的指令

到目前为止，我发现的各种建议都没有成功。如果您知道如何将新的干净库配置为使用 *ngFor 等指令，我将非常感谢您的建议。我用 Angular 8 和 9 创建了库，结果是相同的。

亲切的问候

肖恩

我有一个带有 SVG 元素的组件，我试图将该 SVG 的各个部分分成不同的组件。嵌套组件需要从父组件动态创建，这是因为我正在从 json 文件构建整个 SVG 图形，该文件确定需要添加哪些嵌套组件（SVG 嵌套形状）。

为了动态创建组件，我使用 ComponentFactoryResolver 和 @angular/core 中的 ViewContainerRef

@Component({
selector: 'skick-player',
 templateUrl: './player.component.html',
 styleUrls: ['./player.component.scss'],
})
export class PlayerComponent implements OnInit, AfterViewInit {

@ViewChild('svgContainer', { read: ViewContainerRef }) container;

constructor( private resolver: ComponentFactoryResolver) {}

  performFrame() {

      ....
     //Add nested component
      const factory = this.resolver.resolveComponentFactory(
        BackDropItemComponent
      );
      const componentRef = this.container.createComponent(factory);
      componentRef.instance.imagePath = objectUrl;
    }
  }
});

}

问题是 Angular 将嵌套组件包裹在 div 中：

<div _nghost-qon-c42="" skick-back-drop-item="" class="ng-star-inserted">

因此，由于创建了特殊的元素标签，它不会被渲染。如果删除该 div 元素，它将正确渲染嵌套的 SVG。

我知道我可以将嵌套组件渲染为指令并且它会起作用，如下所示：

<svg> …

我认为指令的本地提供者是为其子内容提供服务，例如：

//template in a module 
<table>
   <tr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</table>

myPipe在其构造函数中具有依赖项MyService：

因此，如果我将指令定义为：

@Directive({
    selector: "[myAttr]", 
    providers: [MyService]
})
export class MyDirective { }

并将其应用为：

<table>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</table>

那么MyServiceinmyPipe的构造函数就可以解决了。

但是，如果有一个组件也在MyService其本地提供程序中定义并将其应用为：

<myComponent>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</myComponent>

由于 和MyDirective都可以为MyComponent提供服务myPipe，那么会选择哪一个myPipe，本地提供商 MyDirective或MyComponent？