【问题标题】:ng-click attribute on angularjs directiveangularjs 指令上的 ng-click 属性
【发布时间】:2013-03-14 21:16:07
【问题描述】:

我认为在开箱即用的指令上使用众所周知的角度属性应该很容易。

例如,如果我的指令的名称是 myDirective,我想这样使用它:

<div ng-controller="myController">
   <my-directive ng-click="doSomething()"><my-directive>
</div>

而不是像下面的示例中需要定义自定义点击属性(onClick)

<div ng-controller="myController">
   <my-directive on-click="doSomething()"><my-directive>
</div>

似乎 ng-click 可以工作,但是您也需要在指令标签上指定 ng-controller ,这是我不想要的。我想在周围的 div 上定义控制器

是否可以在指令上使用 ng-click 以及在父 html 元素上定义的控制器?

【问题讨论】:

    标签: angularjs angularjs-directive


    【解决方案1】:

    这里是更新的代码。也许这就是你要找的东西。

    HTML:

    <div data-ng-app="myApp">
        <div data-ng-controller="MyController">
            <my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
            <my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
        </div>
    </div>
    

    角度:

    var app = angular.module('myApp', []);
    
    app.directive('myDirective', function(){
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                eventHandler: '&ngClick'
            },
            template: '<div id="holder"><button data-ng-click="eventHandler()">Call own function</button></div>'
        };
    });
    
    app.controller('MyController', ['$scope', function($scope) {
        $scope.myFirstFunction = function(msg) {
             alert(msg + '!!! first function call!');   
        };
        $scope.mySecondFunction = function(msg) {
             alert(msg + '!!! second function call!');   
        };
    }]);
    

    编辑

    检查我在 jsFiddler 中制作的解决方案是您想要的吗?

    http://jsfiddle.net/migontech/3QRDt/1/

    【讨论】:

    • 它似乎不起作用...... - 我仍然需要在我的指令中提供 ng-controller
    • 所以你想让一个函数'doSomthing()'不在控制器中而是在你的指令中?
    • 我想要这样的东西:&lt;div ng-controller="MyController"&gt; &lt;my-directive ng-click="myFirstFunction()"&gt;&lt;/my-directive&gt; &lt;my-directive ng-click="mySecondFunction()"&gt;&lt;/my-directive&gt; &lt;/div&gt;此时我只能通过绑定特定的点击属性来实现:app.directive('myDirective', function(){ return { scope: { onClick:'&amp;' } }; });&lt;button ng-click="onClick()"&gt;&lt;/button&gt;
    • 我有点担心这可能不是正确的“Angular”方式...
    • 在 AngularJS 1.2 中,这个例子现在可以开箱即用,不需要“eventHandler”业务。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-07
    • 2014-01-31
    • 1970-01-01
    • 2017-11-01
    相关资源
    最近更新 更多