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

我有以下代码，我想从控制器函数中的自定义指令接收NG模块值：

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>

有人可以帮我吗？

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

您应该建模绑定（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个控制器，但也足够了，也将解决您的问题。

尝试此

<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" >'
        };
    });

相关内容

最新更新

热门标签：