Question

我正在尝试学习AngularJS和JavaScript并更好地理解它，所以请耐心等待。

我有一个指令，我想用index.html中的div的id绑定，现在我已经将$ scope.name硬编码到控制器中。我想知道是否有人能指出我正确的方向。

另外，由于我可能会制作多个指令，我可以将控制器移到指令之外而不是重复所有指令吗？

mydirective.js

angular.module('myModule.directive', []).
directive('myDirective', [function() {
    return {
        restrict: 'A',
        replace: true,
        scope: true,
        controller: ['$scope', function ($scope) {
            $scope.name = 'John Smith';
        }],
        link: function (scope, elem, attrs) {
        },
        templateUrl: 'partials/box.html'
    };
}])

的index.html：

<div>Information
    <div id="name1" my-directive></div>
    <div id="name2" my-directive></div>
    <div id="name3" my-directive></div>
</div>

部分：

<div class="box-for-person">
    <!-- I want to use the html id here-->
    <div class="name-text">{{ name }}</div> 

</div>

任何帮助都将不胜感激。

Answer 1

使用isolated scope：

<强>的JavaScript

angular.module('myModule.directive', []).
directive('myDirective', [function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {
          name: '='
        },
        template: '<div>{{name}}</div>'
    };
}]);

function MyCtrl($scope) {
  $scope.foo = 'Jorge';
}

<强> HTML

<div my-directive data-name="foo"></div>

我想将html id绑定到一个指令中

1 个答案: