Question

仍在快速学习AngularJS，我在下面的内容是一个简单的测试样本，使用ng-repeat来显示列表，最终会是一个弹出窗口。

Fiddle

HTML：

<div class="container" ng-app="main">
    <div id="person-info"></div>
    <div id="people" ng-controller="PeopleController" ng-cloak>
        <div class="person" ng-repeat="person in people" ng-class-even="'even'">
            <a href="" ng-click="showPersonInfo()">( more )</a> <span>{{person.name}}</span>
        </div>
    </div>
</div>

JavaScript：

angular.module('main',[]);

// Main Model
var model = [];
for (var i=0,n=10; i<n; i++){
    model[model.length] = {'name': 'Person '+ i, 'description': 'Person ' + i + ' description'};
}

// Main Controller
function PeopleController ($scope) {
    $scope.people = model;

    $scope.showPersonInfo = function (){
        document.getElementById('person-info').innerHTML = this.person.description;
    };
}

Fiddle

我对上述问题有两个问题：

在点击控制器中使用DOM查找/操作感觉不对
与第一点相关，必须有更好的方法将控制器外部的元素绑定到范围内的模型。理想情况下，我想要一个类似于<div id="person-info">{{$scope.person.description}}</div>的答案，其中点击控制器只需关注可能设置$scope.person或其他一些事件处理。

自从我上次查看Angular以来，文档已经变得更好了，但我欢迎评论提高可读性或最佳/常用实践。例如，我可能会因使用＆＃34; main＆＃34;而感到悲痛。作为应用程序名称：）

Answer 1

如果您想访问 PeopleController 控制器的范围之外，如下所示，请使用$rootScope

外部控制器范围（Working Demo）

<强> HTML

<div class="container" ng-app="main">
     <div id="person-info">{{desc}}</div>
    <div id="people" ng-controller="PeopleController" ng-cloak>
        <div class="person" ng-repeat="person in people" ng-class-even="'even'">
            <a href="" ng-click="showPersonInfo(person.description)">( more )</a> <span>{{person.name}}</span>
        </div>
    </div>
</div>

<强>脚本

angular.module('main',[]);
// Main Model
var model = [];
for (var i=0,n=10; i<n; i++){
    model[model.length] = {'name': 'Person '+ i, 'description': 'Person ' + i + ' description'};
}
// Main Controller
function PeopleController ($scope, $rootScope) {
    $scope.people = model;

    $scope.showPersonInfo = function (personDesc){
        $rootScope.desc=personDesc;
    };
}

INSIDE CONTROLLER SCOPE（Working Demo）

我的建议是将<div id="person-info">{{value}}</div>封装在您的控制器 PeopleController

中

<强> HTML

<div class="container" ng-app="main">

    <div id="people" ng-controller="PeopleController" ng-cloak>
        <div id="person-info">{{desc}}</div>
        <div class="person" ng-repeat="person in people" ng-class-even="'even'">
            <a href="" ng-click="showPersonInfo(person.description)">( more )</a> <span>{{person.name}}</span>
        </div>
    </div>

<强>脚本

   angular.module('main',[]);

// Main Model
var model = [];
for (var i=0,n=10; i<n; i++){
    model[model.length] = {'name': 'Person '+ i, 'description': 'Person ' + i + ' description'};
}

// Main Controller
function PeopleController ($scope) {
    $scope.people = model;

    $scope.showPersonInfo = function (personDesc){
        $scope.desc=personDesc;
    };
}

Answer 2

我有一个建议：不要在控制器中使用元素方法，元素操作只允许在指令中使用。

关于您的代码：我这样优化：

`<div class="container" ng-app="main" ng-controller="PeopleController">
  <div id="person-info">{{desc}}</div>
  <div id="people" ng-cloak>
    <div class="person" ng-repeat="person in people" ng-class-even="'even'">
        <a href="" ng-click="showPersonInfo(person)">( more )</a> <span>{{person.name}}</span>
    </div>
  </div>
</div>`

function PeopleController ($scope) {
  $scope.people = model;

  $scope.showPersonInfo = function (person){
    //console.log(person)
    $scope.desc = person.description;
  };
}

将Angular元素绑定到控制器外部的范围

Fiddle

Fiddle

2 个答案: