2016-01-16 39 views
0

我有以下代码,但它似乎不工作。我试图寻找解决方案,但其中大部分都是较老的和非常具体的答案。通过配置如何从角度张贴到苗条?

  1. 在NG-视图模板载荷:

    我得到了这一点。

  2. 表单通过点击提交。
  3. 没有任何反应。

我使用网络中的Google控制台检查POST,但它不会触发。

我错过了什么?我从this article获得了大部分代码。

HTML视图即形式

<h2>Add new job</h2> 
<form novalidate name="AddNewForm" method="post" action=""> 

    <input type="text" class="form-control" ng-model="job.title" placeholder="Title" required /> 
    <input type="text" class="form-control" ng-model="job.company" placeholder="Company" required /> 
    <input type="text" class="form-control" ng-model="job.description" placeholder="Description" required /> 
    <input type="text" class="form-control" ng-model="job.location" placeholder="Location" required /> 
    <br/> 
    <button ng-disabled="AddNewForm.$invalid || isUnchanged(job)" ng-click="add_new(job)" class="btn">Save!</button> 

</form> 

角配置控制器

(function() { 

    angular 
    .module('app') 
    .config(function($routeProvider) { 
     $routeProvider.when('/add-job', { 
      templateUrl: 'templates/add-job.html', 
      controller: AddController 
     }); 
    }); 

    function AddController($http, $location) { 
     var that = this; 

     that.master = {}; 
     that.activePath = null; 

     that.add_new = function(job, AddNewForm) { 
      $http.post('api/add_job', job).success(function() { 
       alert("added!"); 
       that.reset(); 
       that.activePath = $location.path('/'); 
      }); 

      that.reset = function() { 
       that.job = angular.copy(that.master); 
      }; 

      that.reset(); 
     }; 
    } 
})(); 

苗条API

require 'vendor/autoload.php'; 

$app = new \Slim\App; 

$app->post('/add_job', 'addJob'); 

$app->run(); 

function addJob() { 
    $request = Slim::getInstance()->request(); 
    $job = json_decode($request->getBody()); 
    $sql = "INSERT INTO jobs (title, company, description, location) VALUES (:title, :company, :description, :location)"; 
    try { 
     $db = getConnection(); 
     $stmt = $db->prepare($sql); 
     $stmt->bindParam("title", $job->title); 
     $stmt->bindParam("company", $job->company); 
     $stmt->bindParam("description", $job->description); 
     $stmt->bindParam("location", $job->location); 
     $stmt->execute(); 
     $job->id = $db->lastInsertId(); 
     $db = null; 
     echo json_encode($job); 
    } catch(PDOException $e) { 
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    } 
} 

回答

1

您正在控制器中使用controllerAs语法,但在视图中使用$scope语法。 请注意,您链接到应用$scope在控制所有变量的物品,其将匹配当前视图设置

你需要选择一个或其他这样的观点是与控制器

+0

感谢回答兼容,但我不知道我跟着。 :(根据[John Papa's Guidelines](https://github.com/johnpapa/angular-styleguide),我有意避免使用'$ scope'。注意解释如何在视图中绑定控制器? – Ivan

+1

避免它你需要通过首先声明'controllerAs'别名并使用该别名在视图中为所有控制器模型变量加上前缀来使视图兼容 – charlietfl

+1

例如,如果别名被设置为'“vm”'你需要'ng-click =“vm .doSomething()“' – charlietfl