Question

我想创建一个指令并在我的控制器中使用该参数：

<body ng-app="tstApp">
    <navigationbar tst="hello">
    </navigationbar>
</body>

为此，我创建了一个指令及其控制器：

navigationBar = {};
navigationBar.directives = {};
navigationBar.controllers = {};

navigationBar.directives.navigationbar = function () {
    return {
        restrict: 'E',
        scope: {
            t1: '@tst',
            t2: '=tst',
            t3: '&tst'
        },
        templateUrl: "common/navigation_bar/navigation_bar.tpl.html",
        controller: "NavigationBarController"
    }
};

navigationBar.controllers.NavigationBarController = function ($scope, Api) {
    console.log($scope);
    console.log($scope.t1);
    console.log($scope.t2);
    console.log($scope.t3);
};

testApp.directive(navigationBar.directives);
testApp.controller(navigationBar.controllers);

在控制台中我得到了这个：

Scope {$id: "003", $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null…}
$$asyncQueue: Array[0]
$$childHead: Child
$$childTail: Child
$$destroyed: false
$$isolateBindings: Object
$$listeners: Object
$$nextSibling: Child
$$phase: null
$$prevSibling: null
$$watchers: Array[9]
$id: "003"
$parent: Scope
$root: Scope
nav: Object
t1: "hello"
t2: undefined
t3: function (locals) {
this: Scope
__proto__: Object

和

undefined navigation_bar.js:33
undefined navigation_bar.js:34
function (locals) {
                  return parentGet(parentScope, locals);
                }

我想了解为什么 console.log（$ scope.t1）; 不会显示范围内的值 - ＆gt; t1：“hello”

感谢您的帮助，

胡

添加信息：

如果我将templateUrl替换为：

template: "Scope Id: {{$id }}, t1: {{ t1 }}"

我得到了：

Scope Id: 003, t1: hello

如果我在控制器中放置一些迹线，如下所示：

console.log('Scope Id: ' + $scope.$id +  ', t1: ' + $scope.t1);

我得到了：

Scope Id: 003, t1: undefined

所以范围是相同的并且是共享的。但为什么我无法达到控制器中的t1值。我应该评估一下吗？

Answer 1

@作用域仅将隔离范围的值设置为plain属性值，该属性值始终为字符串。它没有以任何方式进行评估。

您可以在指令定义对象部分的AngularJS Directive文档中阅读有关范围对象的更多信息。

Answer 2

我明白了。

<强> 1。为什么未定义。

我认为该值未定义，因为在构造控制器期间，未完成绑定。

<强> 2。如何获得价值

当属性与 @ 一起传递时，我们需要定义一个观察者来观察绑定。为此我添加了链接属性：

    link: function($scope, $element, $attr) {
        $attr.$observe('tst', function(value){
            console.log('value', value)
            $scope.nav.selection = value
        }
        );
    }

我希望这是最好的方式。

获取控制器中指令的参数值

2 个答案: