我有一个指令,我想要另一个指令,以便能够调用.我一直在尝试使用指令控制器来尝试实现这一点.

指令1将与指令2位于同一页面上,指令1将调用指令2的控制器公开的方法:

指令1:

'use strict';
angular.module('angularTestApp')
    .directive('fileLibrary', function () {
        return {
            templateUrl: 'views/manage/file_library/file-library.html',
            require: 'videoClipDetails',
            restrict: 'AE',
            link: function postLink(scope, element, attrs, videClipDetailsCtrl) {
                scope.doSomethingInVideoClipDirective = function() {
                    videClipDetailsCtrl.doSomething();
                }
            }
        };
    });

指令二:

'use strict';
angular.module('angularTestApp')
    .directive('videoClipDetails', function () {
        return {
            templateUrl: 'views/video_clip/video-clip-details.html',
            restrict: 'AE',
            controller: function($scope, $element) {
                this.doSomething = function() {
                    console.log('I did something');
                }
            },
            link: function postLink(scope, element, attrs) {
                console.log('videoClipDetails directive');
                //start the element out as hidden
            }
        };
    });

使用两者并将其设置为兄弟姐妹的文件:

<div> …

当动态创建"inputName"时,有人会如何使用formName.inputName.$有效？

  <form name="formName">
    <input ng-repeat="(variable) in variables"
           type="text" name="variable.name"
           ng-model="variable.name" required />
 </form>

HTML输入属性"name"的输出将是字符串"variablename",它将应用于所有重复输入.

如果我们试过这个

<form name="formName">
  <input ng-repeat="(variable) in variables"
         type="text" name="{{ variable.name }}"
         ng-model="variable.name" required />
</form>

HTML输入属性"name"的输出将是字符串"{{variable.name}}",它将应用于所有重复输入.

在这两个条件中的任何一个中,都不会动态创建每个重复输入元素的name属性; 所有输入将共享相同的输入名称.如果您想根据特定名称调用特定输入,那就太好了.

• 需要使用动态名称值
• 需要能够调用$ scope.formName.dynamicName.$ valid
• 需要能够调用$ scope.formName.$ valid
• 需要动态名称输入字段添加到嵌套表单或主表单

我想知道如何获得给定父范围的所有子范围的列表.我可以从范围的属性中找到所有内容:$$ childHead,$$ childTail,$$ nextSibling和$$ prevSibling.

我现在使用的方法是从父级获取childHead,然后使用nextSibling获取下一个子级,直到nextSibling为null.

有更好的方法吗？鉴于我想在所有孩子身上调用一个方法[getModel],还有更好的方法吗？

我是角度js的新手,目前仍然坚持使用非常有线的bug.控制器中的函数在通过路径加载的视图调用时运行两次.

http://jsfiddle.net/4gwG3/5/

你会看到警报两次!!

我的观点很简单

我的应用程序代码如下

var IB = angular.module('IB', []);    

//channel controller
IB.controller('channelsController', function ($scope, $routeParams) {
    $scope.greet = function () {
        alert('hi');
    };
});


IB.config(function ($routeProvider) {
    $routeProvider
    .when('/channels', {
        controller: 'channelsController',
        template: '{{greet()}}'
    })

    .otherwise({ redirectTo: '/channels' });

});

有没有办法继承父作用域,同时用传递的属性扩展它？

我想直接从模板将参数传递给可重用的指令,而不必在链接函数中更改DOM.

例如:

<form-input icon="icon-email" label="email" ng-model="data.input"></form-input>

对于这样的指令:

    <div class="form-group">
      <label>{{label}}</label>
      <div class="input-group">
        <div class="{{icon}}">@</div>
        <input class="form-control" placeholder="Email" ng-model="mail.email">
      </div>
    </div>

ng-model在父作用域中,在这种情况下控制整个表单,但我不认为有必要在控制器中存储样式属性.

有没有一种方法可以直接在模板中传递参数而无需创建隔离范围？

题

我刚刚了解到你可以通过以下方式选择"反向"或回调绑定:

scope: { parentScopeFunc: '&?' }

我试图看看是否有办法用双向绑定做类似的事情.

scope: { optional2WayBoundProp: '=?' }

我尝试使用链接函数的element&attrsparams,但后来我失去了回到父级的双向绑定.该方法仅允许父对子更新.然后我不妨使用@范围机制.

编辑

我发现这个问题Angular JS指令,在链接函数中更改了2路数据绑定,以便回答有关的主要问题=?.但是它没有解决'可选'非约束值,如true或false.

目标

这就是我想要完成的事情:

• 编写一个面板指令,用于转换内容,并且可以在标题区域之外进行折叠:
  <my-panel> <transcluded-header-content/> <button ng-click="toggleCollapse()"/> <transcluded-body-content ng-if="isExpanded"/> </my-panel>

• 在某些情况下,我想在父作用域中缓存面板实例的折叠状态(因此,双向绑定视图的控制器可以确定如何缓存此信息):
  
  <my-panel is-expanded="parentScopeProp">

• 在其他情况下,我可能只想声明它而不绑定到父作用域属性或者我可能根本不会声明它,在这种情况下它假定它已扩展.
  
  <my-panel is-expanded="true/false">

据我所知,通过=分配,那表情像undefined,true及false无法评估.

也许我疯了,或者习惯于KnockoutJS,但我一直在文档中寻找一个ngWith指令来定义元素,控制器或包含(ngInclude)部分的范围.

例如:

我想编写一个增强MyItem的控制器,如:

MyModule.controller('MyItemCtrl', function($scope) {
    $scope.doSomethingToItem = function() {
        $scope.name = "bar";
    };
});

或MyItem的视图/模板,如:

<div ng-controller="MyItemCtrl">
    {{name}}
    <button ng-click="doSomethingWithItem()">Do Something</button>
</div>

但在这两种情况下,我都在想象我的范围是从我的模型继承原型,MyItem.

但范围不继承模型!!

哪个让我感到困惑.

相反,我的模型是范围上的属性.

在转发器的情况下:

<div ng-repeat="item in list">
    <div ng-controller="MyItemCtrl">
        {{item.name}}
        <button ng-click="doSomethingWithItem()">Do Something</button>
    </div>
</div>

这意味着我必须使用item.this或item.that代替只是this和that.我必须记住哪些函数是模型的原生函数,哪些函数由控制器直接应用于作用域.

如果我想部分显示名称(愚蠢的例子,我知道,但你明白了):

<h3>{{name}}</h3>

我必须写它

<h3>{{item.name}}</h3>

然后确保模型始终是项目.通常通过将其包装在指令中来简单地定义具有item属性的范围.

我经常想要做的事情就是:

<div ng-include="'my/partial.html'" ng-with="item"></div>

要么

<div ng-repeat="list" ng-controller="MyItemCtrl">            
    {{name}}
    <button ng-click="doSomethingWithItem()">Do Something</button>
</div>

那里有一些我没有找到的神奇指令吗？或者我完全错了,只是找麻烦？ …

我试图通过指令控制器中的"&"操作将从控制器范围传递的函数调用到指令中.然而,Angular声称该方法未定义.在一遍又一遍地阅读我的代码,搜索互联网,然后重复这个过程后,我决定转向这里提供帮助.

这是我的控制器的相关部分.它包含我传递给我的指令的方法.

angular.module('myApp.controllers', []).controller('PostCtrl', ['$scope', 'postalService', function($scope, postalService) {
    $scope.posts = [];

    $scope.getPosts = function() {
        postalService.getPosts(function(err, posts) {
            if(err);
            else $scope.posts = posts;
        });
    };
}]);

这是我的指示.我无法调用onPost.

angular.module('myApp.directives', []).directive('compose', ['postalService', function(postalService) {
    return {
        restrict: 'E',
        transclude: false,
        replace: true,
        scope: {
            onPost: "&" //why will it not
        },
        templateUrl: "partials/components/compose-partial.html",
        controller: function($scope, postalService) {
            $scope.title = "";
            $scope.content = "";
            $scope.newPost = function() {
                postalService.newPost($scope.title, $scope.content, function(err) {
                    if(err) console.log(err + ":(");
                    else {
                        console.log("Success getting posts.");
                        //why …

我希望能够在事件发生更改指令显示的内容时通知指令.我知道指令只运行一次,所以我想知道如何做到这一点.我也不确定我是否应该使用$ emit或$ broadcast,这是一个控制器的子指令？

例如,在我的控制器中,我有:

$rootScope.$emit('PHOTO_UPLOADED', photo);

在我的指令中:

.directive('photo', [function () {
  return {
    restrict: 'EA',
    scope: {user: '='},
    replace: true,
    template: '<div id="{{user.id}}"></div>',
    link: function ($scope, element, attrs) {
      var thumbnail = ($scope.user && $scope.user.image) 
        ? $scope.user.image
        : '/default.png';

      element.css('background-image', 'url(' + thumbnail + ')');

      $rootScope.$on('PHOTO_UPLOADED', function(event, data) {
         thumbnail = data;
      });
    }
  };
}])

我试图这样做但没有发生任何事情,缩略图没有更新,因为该指令已经运行.

$scope.$apply 将不再是Angular 2的一部分.那么,如果在常规角度执行上下文之外更改了任何绑定属性,我们如何让Angular知道更新DOM？

摘自Minko Gechev的博客文章:

没有更多$ scope.$ apply

但是AngularJS怎么知道它的执行环境之外的任何东西都取而代之？让我们思考一下变化的来源:

• 的setTimeout
• 的setInterval
• 提示(是的,有人还在使用它......)
• XMLHttpRequest的

• 的WebSockets

• ...

答案是:

我知道修补浏览器内置的javascript函数以通知Angular的任何更改都可以以相对安全的方式完成(不会引入细微的错误)并且对开发人员来说非常方便.但是第三方API(例如jQuery.fadeIn)或浏览器是否公开了一些未涵盖的新异步API呢？什么是旧的替代品$scope.$apply？