Question

这是我的自定义指令代码

(function () {
    var app = angular.module('CustDirMod', []);
    var custdirCtrl = function ($scope) {
        $scope.Person = {
            Name: 'Jagan868',
            address: {
                street: '10 Donwstreet',
                city: 'North Avenue',
                state: 'Los Angeles'
            },
            friends: [
                'Friend1',
                'Friend2',
                'Friend3'
            ]
        };
    };
    var custDirectivewithBinding = function () {

        return {
            templateUrl: "Friends.html",
            restrict: "E",
            controller: function ($scope) {
                $scope.KnightMe = function (Person) {
                    Person.rank = "Knight";
                }
            }
        }
    };
    app.controller('CustDirCtrl', custdirCtrl);
    app.directive("custDirectiveBinding", custDirectivewithBinding);
})();

这是我的模板html

<div class="panel panel-primary">
    <div class="panel-heading">
        {{ Person.Name }}
    </div>
    <div class="panel-body">
        <div ng-show='!!Person.address'>
            <h4>Address :
            </h4>
            {{Person.address.street}}
            <br />
            {{Person.address.city}}
            <br />
            {{Person.address.state}}
        </div>
        <h4>Friends :</h4>
        <br />
        <ul>
            <li ng-repeat='friend in Person.friends'>
                {{friend}}
            </li>
        </ul>
        <div ng-show="!!Person.rank">
            Rank : {{Person.rank}}
        </div>
        <button ng-show="!Person.rank" class="btn btn-success" ng-click="KnightMe(Person)">Knight Me</button>
    </div>
</div>

现在是以下最终的html页面，我正在使用上面的自定义指令

<!DOCTYPE html>
<html ng-app="CustDirMod">
<head>
    <title>Simple Directives - Angularjs</title>
    <script src="Scripts/jquery-3.1.1.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular-1.5.8.js"></script>
    <script src="Scripts/CustomDirective.js"></script>
</head>
<body ng-controller="CustDirCtrl" class="container" style="padding-top:30px;">
    <cust-directive-binding></cust-directive-binding><br /><br />
</body>
</html>

现在我尝试在我的自定义指令中添加隔离范围，如下所示

var custDirectivewithBinding = function () {

        return {
            templateUrl : "Friends.html",
            restrict: "E",
            scope: {
                userdata: "="
            },
            controller: function($scope){
                $scope.KnightMe = function (Person) {
                    Person.rank = "Knight";
                }
            }
        }
    };

然后在html页面中如下

<body ng-controller="CustDirCtrl" class="container" style="padding-top:30px;">
    <cust-directive-binding userdata="Person"></cust-directive-binding><br /><br />
</body>

添加名为'userdata'的隔离范围后，我没有在UI中获取任何数据。但是，如果我从js＆amp;删除'userdata'隔离范围html文件工作正常。如何解决这个问题。

P.S：我不希望将隔离范围的本地属性名称与“Person”相同。我只是希望它能有所不同，以便我能够轻松区分。

Answer 1

您在指令中没有范围属性Person，在创建隔离范围时，您将其重命名为userdata。

您需要将模板更改为现在使用userdata而非Person，或将userdata的名称更改为Person，以便模板正常工作

scope: {
      userdata: "="
 }
  // in view 
 {{ userdata.Name}}

或者

<cust-directive-binding Person="Person">

scope: {
      Person: "="
}
// in view 
 {{ Person.Name}}

Answer 2

因为现在在指令模板中，数据将与隔离范围变量userdata一起使用。要解决此问题，您可以在模板上的每个位置使用userdata而不是Person。但我没有这样做，我建议你在Person: "=userdata"这样的隔离范围上使用别名。如果userdata表示属性，则指令数据将以Person名称提供。

scope: {
   Person: "=userdata"
},

隔离范围不起作用

2 个答案: