angularjs - 具有隔离范围和内部控制器的 Angular JS 指令

Question

我已经有一段时间没有接触过 angular js 了，当我写的时候，我们使用了 typescript 的风格，这对我来说非常简单。现在我想写vanilla angular js，我觉得我有点困惑。

问题：
我有一个指令，在其隔离范围内有一些变量，我基本上想绑定到这个指令，该指令在 a for each 内生成<ul>到单击事件。我尝试在 ng-click 上直接绑定一个函数，并在点击时使用链接元素等绑定，但似乎我做错了，因为第一种方式没有任何反应，第二种方式双向绑定变量未定义。

在这里： https ://plnkr.co/edit/OOBMs8pYONLjUE9lQXla?p=preview

活动-header.html

<div>
<h4>
Activity Name: {{activity.activity_name}}
</h4>

<h6>    
Activity Start Date: {{activity.activity_start_date}}
</h6>

<h6>        
Activity End Date: {{activity.activity_end_date}}
</h6>

<h6>
Participants: {{activity.participants}}
</h6>
</div>

活动标头.js

var app = angular.module('mainApp');

/*
app.controller('activityHeaderCtrl', ['$scope', function($scope) {
    $scope.activity='';
    $scope.msg='';
    $scope.check = function() {
            alert($scope.msg);
        };
}]);
*/

app.directive('activityHeader', function() {
    return {
        restrict: 'AE',
        templateUrl: 'activity-header.html',
        controller: ['$scope', Controller],
        scope: {
            activity:'=',
            msg:'='         
        },
        link: function($scope, $element, attrs) {
        $element.bind('click', function($scope) {
            alert($scope.msg);
        })}
    };        
    function Controller($scope) {
        $scope.check = function() {
            alert($scope.msg);
        };

    }
});

索引.html

<html ng-app="mainApp">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="script-main.js"></script>
    <script src="activity-header.js"></script>

<body>

    <div ng-controller="ctrl">

        <h1>
            Major Bla bla System    
        </h1>

        <ul>        
            <li ng-repeat="x in events">                
                <div activity-header activity="x" msg="greetingsfriend" ng-click="check()"></div>
            </li>
        </ul>    

        <h6>
            Beta v.0.2
        </h6>

    </div>

</body>

</html>

脚本-main.js

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

app.controller('ctrl', function ($scope) {

    //$scope.events = ["Elections", "Protest", "Martial Law", "X-mas Celebration"];
    $scope.events = [
        {"activity_name": "Elections", "activity_start_date": "31/12/2014", "activity_end_date": "31/12/2015", "participants": "1453"},
        {"activity_name": "Martial Law", "activity_start_date": "31/12/2014", "activity_end_date": "31/12/2015", "participants": "1821"},
        {"activity_name": "Protest", "activity_start_date": "31/12/2014", "activity_end_date": "31/12/2015", "participants": "1940"},
        {"activity_name": "X-mas Celebration", "activity_start_date": "31/12/2014", "activity_end_date": "31/12/2015", "participants": "2009"}
    ];

    $scope.salute = function () {
        alert('hello there');
    };

});

（顺便说一句，我使用的是 Mozilla Firefox，否则我必须在 node.js 上托管它以获取相同的来源策略，不知道如何在 chrome/internet explorer 中将其关闭）。

score 1 · Accepted Answer

depends on what you want to obtain.

For example, if you want to bind a function of your directive on click you don't need the link function. You can simply bind a click on your outer div with ng-click. See this example: http://jsbin.com/sanova/edit?html,js,output

But if you want to call a function on your parent controller you need to pass a reference to that function with a property on your directive. See this example: http://jsbin.com/peqasu/edit?html,js,output

As you can see i've put in both example a ng-click directive on the outer div in your directive template. On click the check function on the directive controller is invoked. In the first example simply alert the message, in the second one calls the greetFunction passed as a property of your directive.

score 0 · Accepted Answer

关于如何处理点击的任何想法？

您的问题是您将$scope其用作单击处理程序函数中第一个参数的名称。该名称覆盖$scope了链接函数的参数。

    //BAD
    link: function($scope, $element, attrs) {
    $element.bind('click', function($scope) {
        alert($scope.msg);
    })}

像这样修复您的代码：

    //GOOD
    link: function(scope, element, attrs) {
        element.on('click', function clickHandler(event) {
            console.log(scope.msg);
        });
    }

AngularJS jqLite使用 JQuery 事件对象作为第一个参数 not调用单击处理程序$scope。

这是处理指令事件的正确方法吗？
为什么ng-click事件不能调用我在指令控制器中的函数？

The ng-click directive binds to functions in the parent scope.

To bind click events to functions on the directive's scope, use element.on(). It's how ng-click gets the event from the browser. Look at the source code.

score 0 · Accepted Answer

First of all you need to know the difference between smart and dumb components (directives).

Here you can read a very good article explain the difference from smart and dumb components written by Dan Abramov, the creator of Redux: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

When you understand this difference you can try to write more dumb components and less smart one. This means that you need to keep all the logic on your parents components and pass it down to your dumb components.

In previous examples we do that only in the second one. In fact, in that example we keep the logic (our check function) in our parent component and only pass a reference to it. In this way the activity-header component have no idea of what to do when a click is done. It only know that it must call a function, what this function does is not its problem.

This is a good approach to have in a complex application, so you can reuse your components in different ways simply changing the reference function.

angularjs - 具有隔离范围和内部控制器的 Angular JS 指令

3 回答 3

Related

Reference