0

我开始学习AngularJS，但我一直坚持创建自己的服装指令。

所以，首先，我使用yeoman 项目来生成一个 AngularJS 项目，这是我的起点。

现在，进入主题——

我有以下代码：

应用程序.js：

myapp.directive('userinfo', function() {
        var directive = {};

        directive.restrict = 'E';
        directive.template = '<b>User: {{ user.firstName }} {{ user.lastName}}</b>';

        directive.scope = {
            user : '='/*, editing: false*/
        };

        return directive;
    });

索引.html：

<body ng-app="proj2App" ng-controller="MainCtrl">
...
<userinfo user="users[0]"> </userinfo>
...
</body>

主.js：

angular.module('proj2App')
  .controller('MainCtrl', function ($scope) {
    $scope.users = [
        { firstName : 'John', lastName: 'Doe'}
                     ];
  });

我的问题似乎是在我定义directive.scope 的行中的app.js 中找到的。每当它是这样的：

        directive.scope = {
            user : '='/*, editing: false*/
        };

没有问题，一切正常。但是，当我删除评论块时，它看起来像这样：

        directive.scope = {
            user : '=', editing: false
        };

它不起作用 - 页面不会显示模板，并且 angular 会抛出以下错误，这对我来说绝对什么也没说：

**TypeError**: undefined is not a function
    at http://localhost:9000/bower_components/angular/angular.js:6436:30
    at forEach (http://localhost:9000/bower_components/angular/angular.js:331:20)
    at parseIsolateBindings (http://localhost:9000/bower_components/angular/angular.js:6435:5)
    at http://localhost:9000/bower_components/angular/angular.js:6494:49
    at forEach (http://localhost:9000/bower_components/angular/angular.js:323:20)
    at Object.<anonymous> (http://localhost:9000/bower_components/angular/angular.js:6480:13)
    at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4182:17)
    at Object.enforcedReturnValue [as $get] (http://localhost:9000/bower_components/angular/angular.js:4035:37)
    at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4182:17)
    at http://localhost:9000/bower_components/angular/angular.js:4000:37

有人知道这里发生了什么吗？

4

1 回答 1

1

在函数中设置editing变量link

myapp.directive('userinfo', function () {
    var directive = {};

    directive.restrict = 'E';
    directive.template = '<b>User: {{ user.firstName }} {{ user.lastName}}</b>';

    directive.scope = {
        user: '='
    };

    directive.link = function (scope) {
        scope.editing = false;
    };

    return directive;
});
于 2014-12-27T13:19:16.003 回答