Question

我是Angular的新手，所以如果这个问题的答案非常基本，请不要感到惊讶。

我正在尝试将地图封装在指令中，地图会有一些自定义行为：我希望它与服务通信以检索与商家相关的所有点。

所以我想将商家作为参数传递给指令：

这是HTML：

<div ng-app="myApp">
    <div ng-controller="Ctrl1">
        <p>Ctrl 1: {{merchant1}}</p>
        <map merchantDetails="{{merchant1}}"></map>
    </div>
</div>

这是javascript：

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

myApp.controller('Ctrl1', function ($scope) {
    $scope.merchant1 = "foo"
});

myApp.controller('Ctrl2', function ($scope) {
    $scope.merchant2 = "bar"
})
    .directive('map', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs, controller) {
            scope.merchant2 = attrs.merchantDetails;
        },
        scope: {
            merchantDetails: "@"
        },
        template: 'Ctrl2: {{merchant2}}'
    }

});

问题是模板上的scope.merchant2永远不会更新。我希望它有“foo”，或者最坏的“bar”，而不是空白。

当我在Chrome中调试此内容时，永远不会执行控制器Ctrl2初始化。为什么？我希望它能在链接阶段之前完成。

如何将“foo”值传递给Ctrl2？

jsfiddle可用here。

Answer 1

你几乎就在那里

只需更改de directive属性：

<map merchant-details="{{merchant1}}"></map>

Angular期待＆＃34; - ＆＃34;在大写之前

Answer 2

你实际上并不需要第二个控制器。我更新了小提琴手，请检查它是否符合您的要求：

https://jsfiddle.net/e7cfcakv/7/

<div ng-app="myApp">
    <div ng-controller="Ctrl1">
        <p>Ctrl 1: {{merchant1}}</p>
        <map merchant-details="{{merchant1}}"></map>
    </div>
</div>

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

myApp.controller('Ctrl1', function ($scope) {
    $scope.merchant1 = "foo"
});

myApp.directive('map', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs, controller) {
            scope.merchant2 = scope.merchantDetails;
        },
        scope: {
            merchantDetails: "@"
        },
        template: 'Ctrl2: {{merchant2}}'
    }
});

Answer 3

遵循角度js命名约定

只需更改属性＆＃34; merchantDetails＆＃34;到＆＃34;商家详情＆＃34;

 <map merchant-details="{{merchant1}}"></map>

Angular.js将参数传递给指令

3 个答案: