Question

我正在尝试理解这种行为，并添加了我尝试做的简化代码。在使用模态控制器的模态的HTML部分中，我有一些像这样的代码：

<form>
        <!--  example one   -->
        <div read-field="{{ singleContact._id }}" ></div>
        <h2>{{ singeContact._id }}</h2>

        <!-- example two -->
        <div read-field="{{ someScope }}"></div>

</form>

和指令：

angular.module('myApp')
.directive('readField', function () {
    return {
        link: function (scope, element, attrs) {
            console.log(attrs); // outputs correct object with attrs.readField "523c2..mongo_id.."
            console.log(attrs.readField); // outputs and empty string
        }
    };
});

即使在h2中的页面上正确呈现了singleContact._id值，并且只通过记录（attrs）而在返回的对象中正确显示，记录变量attrs.readField会直接返回一个空字符串。使用someScope在示例二中做同样的事情，一切正常，即一个console.log的attrs.someScope返回＆＃39; Foo＆＃39;应该如此。

显然，它是如何在控制器中设置的问题：示例一（singleContact）来自对api服务的函数调用，而示例二（someScope）是一个直接声明。

angular.module('myApp')
.controller('EditModalCtrl', function ($scope, $modalInstance, $rootScope, apiCalls, id) {

    apiCalls.getContact(id)
        .success(function (data) {
            console.log(data);
            $scope.singleContact = data;
        });

    $scope.someScope = 'Foo';

});

任何让我理解这一点的帮助都会非常感激，我是棱角分明的新人，感觉我在这里错过了一些重要的东西，谢谢。

Answer 1

singleContact._id未绑定到链接函数运行点的属性，因此将传递一个空字符串作为readField值。请尝试这种方法：

<form>
    <div read-field="singleContact._id" ></div>
    <h2>{{ singeContact._id }}</h2>
</form>

angular.module('myApp')
.directive('readField', function () {
    return {
        link: function (scope, element, attrs) {
            console.log(attrs); // outputs correct object with attrs.readField "523c2..mongo_id.."
            console.log(scope.$eval(attrs.readField)); // should evaluate the expression on the current scope
        }
    };
});

在Angular指令中未定义Scope对象

1 个答案: