Question

我有以下代码，我想从控制器函数中的custom指令接收ng-module值：

getName 函数是我尝试获取值时的函数..

'use strict';

angular
.module('app', [])
.controller("Controller", function ($scope) {
$scope.getName = function() {
return $scope.name;
};
})
.controller("EditController", function($scope) {
$scope.editingMode = true;
})
.directive("newName", function ($parse) {
return {
template: 'Write name: <input type="text" ng-model="name">'
};
});


<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Angular</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>

    <div ng-controller="Controller">
      <h1>Hello, {{ getName() }}</h1>

      <div ng-controller="EditController">
        <new-name ng-show="editingMode"></new-name>
      </div>
    </div>

  </body>
</html>

有人能帮助我吗？

Answer 1

您的getName()函数位于parent控制器中，您的子控制器会覆盖name变量（JS原型继承）。

您应该为您的父作用域属性建模bind（use dot(.) in your bindings），以避免被覆盖。您还应该为指令定义restrict type，并且应该从父HTML传递变量。

以下是以下工作代码：

angular
  .module('app', [])
  .controller("Controller", function($scope) {
    $scope.name = {
      n: ''
    }
    $scope.getName = function() {
      return $scope.name.n;
    };
  })
  .controller("EditController", function($scope) {
    $scope.editingMode = true;
  })
  .directive("newName", function($parse) {
    return {
      restrict: 'E',
      scope: {
        name: '=',
      },
      template: 'Write name: <input type="text" ng-model="name">'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
</head>

<body>

  <div ng-controller="Controller">
    <h1>Hello, {{ getName()}}</h1>
    <div ng-controller="EditController">
      <new-name ng-show="editingMode" name="name.n"></new-name>
    </div>
  </div>
</body>

</html>

此外，我建议你的代码中不需要2个控制器，一个就足够了，也可以解决你的问题。

Answer 2

试试这个

<div ng-controller="Controller">
        <h1>Hello, {{ name }} </h1>

        <div ng-controller="EditController">
            <new-name ng-show="editingMode" name="name"></new-name>
        </div>
    </div>
angular
    .module('app', [])
    .controller("Controller", ['$scope' , function ($scope ) {
        $scope.getName = function (name) {
            return $scope.name = name;
        };

    }])
    .controller("EditController", function ($scope) {
        $scope.editingMode = true;
        $scope.$watch('name', function (newVal, oldVal) {
            $scope.getName(newVal);
        });
    })
    .directive("newName", function () {

        return {
            transclude :true,
            restrict: 'E',
            scope: {
                name: '=',
            },
            template: 'Write name: <input type="text" ng-model="name" >'
        };
    });

从控制器函数中的自定义指令获取值 - AngularJS

2 个答案: